前言 最近在做vue3项目的时候用到了icon这个组件,但是发现ElementPlus的图标库有点少,于是就去IconFont(阿里图标库)去找SVG图标素材,但是发现大小样式调不好,于是就想着能不能用ElementPlus的方式来引入阿里图标库的SVG图标。 解决办法 去IconFont官网 IconFont 点击复制SVG代码 在项目中创建icon文件夹 创建icon文件夹...
1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中, 不然去其他图标库的时...
第一步:引入项目下面生成的 symbol 代码: 局部引入 全局引入:main.js中引入 // 阿里图标 import '@/assets/iconfont/iconfont.css' import '@/assets/iconfont/iconfont.js' 第二步:加入通用 CSS 代码(引入一次就行): 局部引入 .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: cu...
首先在阿里官网选好自己需要的图标 并加入项目 然后批量编辑项目,修改类名前缀为el-icon-my 完成之后下载到本地 你会发现这样的目录结构,其中iconfont.css 是我们需要打开参考的,(这里必须提一句 阿里这个栗子做的果然很人性化,赞一个) 将文件夹下四种字体和style.css拷贝到项目目录下,并在main.js种引入 大功告...
vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。 演示地址:https://admin-tmpl.rencaiyoujia.com/ github地址:https://github.com/rcyj-FED/vue3-composition-admin 项目css 使用sass进行开发,关于icon图标则使用阿里的iconfontsymbol引用的方式...
字体图标:阿里iconfont图标 项目结构 使用了vue3标准分层结构,让目录更加清晰。 整个项目摒弃了vue2语法,采用最新vue3语法编码开发。 整体项目布局分为侧边栏+中间栏+右侧栏三大部分。 <WinBar v-if="!route.meta.hideWinBar" /> <!-- 侧边栏 --> <SideBar...
**在main里面导入引入icon** 代码语言:javascript 复制 import\*asIconsfrom'@element-plus/icons-vue' **// 注册Icons 全局组件** 代码语言:javascript 复制 Object.keys(Icons).forEach(key=>{app.component(key,Icons[key])}) 按需引用 **(House )名字引用是你要使用图标的名字,导入是首字母大写** ...
字体图标:阿里iconfont图标库 三、项目结构目录 ◆ 一览效果 ◆ vue3.x封装自定义弹窗组件 为了整体效果一致性,项目中用到的所有弹窗功能均是自定义组件v3layer来实现。 V3Layer基于vue3.0开发的pc端自定义弹窗组件,支持拖拽(自定义拖拽区)、缩放、最大化、全屏、置顶弹框等功能。
局部引入,需要哪个图标引入哪个,因为element-plus中每个图标都是一个组件来的。如: import{User,Lock,View}from"@element-plus/icons-vue"; 最后编辑于:2022.05.13 15:34:00 ©著作权归作者所有,转载或内容合作请联系作者 2人点赞 Vue 更多精彩内容,就在简书APP ...
web前端开发爱好者,专注于前端h5、jquery、vue、react、angular等技术研发实战项目案例。 « 上一篇 基于vue3.0+vant3聊天实例|vue3仿微信app界面 下一篇 » 基于vite2+vue3.x实战小视频/直播聊天|vue3.0仿抖音短视频 引用和评论 被1篇内容引用