vue项目中引用阿里云图标库

登录阿里云矢量图标库，选取图标，加入购物车，加入项目
选择Symbol方式，下载至本地，解压
在项目src/assets下新建目录iconfont，只拷贝解压出的iconfont.js文件
在iconfont目录下新建iconfont.css文件，写入代码:

/* svg图标通用样式 */.icon {width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

目录结构如下：

在main.js中引入新建的js、css文件

// 引入阿里云图标
import './assets/iconfont/iconfont.js'
import './assets/iconfont/iconfont.css'

最后，在需要使用图标的地方写入图标代码：

<svg class="icon" aria-hidden="true"><use xlink:href="#xxxxxx"></use>
</svg>

注：其中 # 符号必须要写，xxxxxx代表图标的名称 (至阿里云图标库项目目录下查看)
图标大小可在svg标签中添加 style=“width: 2em;height: 2em” 改变大小，width和height必须一致

vue项目中引用阿里云图标库相关推荐

在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件注意文件路径 4.引入 ...
vue项目中引入阿里云滑动验证
注册阿里云账号参照滑动验证demo 滑动验证在vue中使用步骤 1.在vue-cli安装的项目中,index.html页面引入js <html><head><meta ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...
在自己的项目中使用阿里云字体图标
步骤制作svg格式的图标,并上传到阿里云图标库将图标加入到购物车将购物车中的图标添加到项目生成项目的图标链接,直接在项目中引用图例上传svg 添加到购物车将购物车中的图标添加到项目生成 ...
PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑ 找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证一.报错问题解决描述:照官网写的引入方式引入vue报错 AWSC is not define 解决:.html文件引入s ...

vue项目中引用阿里云图标库

vue项目中引用阿里云图标库相关推荐

最新文章

热门文章