首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue使用iconfont方式

vue项目中使用iconfont方式

2024-07-27 09:08:25 作者：不吃香菜的蟹老板

这篇文章主要介绍了vue项目中使用iconfont方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目中引入iconfont的方式

iconfont的三种使用方法

unicode 不常用
Font class 像字体一样使用，默认黑色图标，无法修改颜色
Symbol 支持多色图标，更灵活，推荐

一、unicode

二、Font class

方式一：下载到本地

第一步：iconfont-资源管理-我的项目-Font class -下载到本地

第二步：引入至项目中

在 index.html

<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" rel="external nofollow"  />

第三步：vue页面中使用

<span class="iconfont icon-off-line"></span>

方式二：在线引用

iconfont-资源管理-我的项目-Font class - 查看在线链接 - 项目引用样式文件 - 页面中使用；

使用方式跟上面的方式一大体相同，只是在index.html中引入href 不一样

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4*******_kylxvxppycg.css" rel="external nofollow"  />

三、Symbol

3.1 下载到本地的方式

3.1.1 iconfont-我的项目-symbol-下载到本地 - 解压提取出最低层文件夹（font_421XXXXX）-重命名文件夹为 iconfont（包含iconfont.js）放在vue项目中（我是放在/assets/ ）

3.1.2 在assets 目录下建一个icon.css文件 /assets/css/icon.css

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3.1.3 在main.js中引入js和css

import './assets/iconfont/iconfont.js'
import './assets/css/icon.css'

3.1.4 最后vue文件中使用图标

<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.2 在线引用的方式

3.2.1 、 iconfont-我的项目-symbol-查看在线链接-复制链接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
3.2.2 、第二步跟上面一样，在assets 目录下建一个icon.css文件
3.2.3、在mian.js中引入 icon.css文件，在index.html引入在线js资源文件并且加上前缀 https:

!!! 记住在线的引入不是在main.js中引入js文件了，因为没有本地iconfont目录,而是在index.html中引入

// 在 main.js

import './assets/css/icon.css'

// 在public/index.html

<head>
    <script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>

3.2.4 最后在页面中使用图标是一样的

<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.3 修改图标颜色

在线修改：选中图标批量去色
本地修改：把js文件用正则表达式找出fill属性，把fill属性全干掉
最后，设置外层颜色

.outerColor{
	  color: red;
}

个人认为：

在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；

本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。