vue 引入阿里图标

阿里图标库集成Vue教程
本文详细介绍如何从阿里图标库中挑选图标并将其整合到Vue项目的过程。具体步骤包括:选择图标、下载图标代码包、配置本地文件夹、引入样式等。

1.去阿里图标矢量图标库将想要的图标添加入库

2.再去库中将图标添加到项目。

3.再到我的项目中,选择,我这里采用的是将图标代码包下载到本地再引入到vue项目中。

4.在vue项目的assets文件夹下新建一个iconfont文件夹(名字随意),将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff复制到iconfont文件夹下。

5.在main.js中全局引入iconfont.css。

6.之后就可以在项目中正常使用了

 

转载于:https://www.cnblogs.com/luyuefeng/p/8668236.html

### 在 Vue3 中添加并使用阿里巴巴矢量图标库 #### 下载与准备 为了在Vue3项目中使用阿里巴巴矢量图标库,首先访问官方网站 https://www.iconfont.cn/ 并创建个人的项目图标库。选择所需的图标并通过网站界面将其加入到自定义项目里;完成之后下载整个项目的压缩包,其中包含了`demo_index.html` 文件,该文件展示了不同类型的调用方法[^2]。 #### 导入样式表 解压后得到的资源文件夹应当放置于Vue工程目录下的静态资源路径(如 `src/assets/icons`),接着需要把iconfont.css链接引入到全局样式或者组件内部: 对于单文件组件来说,在 `<style>`标签内通过@import语句加载CSS: ```css <style scoped> /* 引入iconfont */ @import url('@/assets/icons/iconfont.css'); </style> ``` 如果希望在整个应用范围内生效,则可以在入口JS(main.js 或 main.ts)做统一处理: ```javascript // 引入iconfont CSS import '@/assets/icons/iconfont.css'; ``` #### 使用 Unicode 方式展示图标 当采用Unicode编码来显示图标的场合下,只需按照HTML实体的形式书写相应字符即可。例如要呈现用户头像的小人图案(假设其unicode码点为`\ue60b`),那么可以直接写成如下形式: ```html <span class="iconfont"></span> ``` 另外一种更为直观的方法就是利用Element Plus框架提供的Icon组件配合class名称实现同样的效果[^3] : ```vue <template> <!-- 假设复制来的类名为 icon-user --> <el-icon><component :is="'icon-user'" /></el-icon> </template> <script setup lang="ts"> import { ElIcon } from 'element-plus' </script> <style scoped> @import url('@/assets/icons/iconfont.css'); .el-icon { font-size: inherit; } </style> ``` 注意这里动态绑定的是组件属性而非普通的DOM元素className, 这是因为ElIcon接受VNode作为子节点从而允许传入其他注册过的SVG symbol ID或字体图标Class.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值