vue自带icon图标,vue使用icon
在使用组件库时，图标往往达不到要求，所以我们往往需要使用第三方的图标库。本文主要介绍vue引入iconfont的相关信息，有需要的可以参考一下。
目录
前言
生成SVG
svg精灵简介
获取项目图标
项目设置
图标参考
组件参考
多主题支持
配置多主题样式
图标转换
页检查
韦偃
前言
本文的初衷是向小组成员推广使用svg精灵来管理项目图标。由于很多项目在实际工作中仍然使用字体类，这在不知不觉中带来了一个痛点。
一期项目开发完成，过一段时间就进入二期项目。新的开发需求必然会增加新的图标，font class需要打包图标的所有字体文件。
即使新需求只添加一个图标，前端的同学也要把旧图标和新图标融合，重新打包生成一个字体文件。这个结果是不可接受的。
Svg精灵可以完美解决这个问题。总体思路是先为项目中的每个图标生成一个svg文件，那么有多少个svg文件就相当于有多少个图标对应。
如果以后要添加图标，只需要添加一个新的svg文件即可。那些现有的图标和svg文件不需要涉及。
接下来，本文将以vue3为基本框架，iconfont为图标库，一步步实践图标引入、使用、管理的全过程。此外，在文章的后半部分，还将介绍多主题变色模式下svg图标的相应处理。
生成SVG
svg sprites简介
svg精灵的技术很早就出来了。详情请点击查看张新旭2014年撰写的文章：SVG Sprites技术简介。
这里简单介绍一下进入实用阶段。svg sprites主要基于两个标签元素：符号和使用。
将不会显示在界面上的符号元素分组，相当于定义一个模板。use元素用于引用和呈现图标。
比如有下面这个svg图标(代码如下)，是一个有爱的形状。
SVG xmlns= http://www . w3 . org/2000/SVG xmlns:xlink= http://www . w3 . org/1999/xlink x= 0px y= 0px width= 24px height= 24px view box= 0 0 24 24
路径填充=#E86C60 d=M17，0c-1.9，0-3.7，0.8-5，2.1C10.7，0.8，8.9，0.7，0.0 c 3.1，0.0，3.1，0.7c 0，6.4，10.9，15.4，11.4，15.8 c0.2，0.4，0.2，0.6，0.2s0.4-0
/svg
现在使用symbol标签将上述路径内容包装在一个图层中，代码如下：
挽救（saving的简写）
symbol view box= 0 0 24 24 id= heart
路径填充=#E86C60 d=M17，0c-1.9，0-3.7，0.8-5，2.1C10.7，0.8，8.9，0.7，0.0 c 3.1，0.0，3.1，0.7c 0，6.4，10.9，15.4，11.4，15.8 c0.2，0.4，0.2，0.6，0.2s0.4-0
/符号
/svg
接下来，把用symbol包装的代码放到页面中(代码如下)，然后添加一个display: none来隐藏它。这相当于在页面上注册一个id名为heart的图标。
此时，页面的其他部分可以引用该图标。引用的方式是在svg标签中放一个use标签，用要引用的图标id填充use标签的xlink:href，界面会渲染成爱的形状。
身体
SVG style= display:none；
symbol view box= 0 0 24 24 id= heart
路径填充=#E86C60 d=M17，0c-1.9，0-3.7，0.8-5，2.1C10.7，0.8，8.9，0.7，0.0 c 3.1，0.0，3.1，0.7c 0，6.4，10.9，15.4，11.4，15.8 c0.2，0.4，0.2，0.6，0.2s0.4-0
/符号
/svg
挽救（saving的简写）
使用xlink:href= # heart rel= external no follow /！-使用图标-
/svg
/body
获取项目图标
前端同学拿到设计图后，一般会浏览整个项目需要的所有图标。
Icon是阿里巴巴体验团队打造的矢量图标库，包含大量图标，供前端工程师选择使用。
点击浏览器打开iconfont官网，选择要在自己项目中使用的图标，将鼠标移动到图标上，点击添加到仓库。
收集完图标后，点击头部右侧导航栏中的购物车，会出现一个弹出框。单击添加到项目。所有图标添加到项目后，页面会自动跳转到导航栏中的资源管理-我的项目下的页面(如下图)。
我们的目标是生成对应于图标的svg文件。这里，我们需要做一些设置。打开上图的项目设置选项，弹出框如下图所示打开。
在“方框字体格式”列中，只有SVG刻度选项被保留，其他所有选项都被取消。设置完成后点击保存按钮。
这时页面会再次刷新，然后点击页面上的下载到本地按钮，下载图标的所有svg文件并解压。解压缩后的文件结构如下图所示。
看上图中的文件结构，我们发现svg图标的所有代码都写在iconfont.svg文件中，不符合预期。我们希望一个图标对应一个svg文件，而不是像现在这样被揉进一个文件。
虽然iconfont目前没有提供文件分离机制，但是可以通过其他平台帮助我们将融合后的svg文件分离成单个文件。
月亮网站有这个功能，也是一个类似iconmoon的logo库网站。
点击浏览器打开iconmoon官网，选择顶部导航栏右侧的IcoMoon App进入图标选择页面，点击页面头部导航栏左侧的导入图标，导入从iconfont下载的iconfont.svg文件，结果如下图所示。
在iconfont列中，您可以看到导入的图标显示在页面上。接下来用鼠标点击导入的图标将其标记为选中，然后点击页面左下角的Generate SVG More按钮(如下图)。
点击按钮，页面跳转。此时点击左下角的下载按钮(如下图)下载图标。
下载完成后，解压目录，SVG文件夹出现在解压后的目录下。当你打开文件夹时，你会发现所有的图标都被分隔成一个文件(如下图)。
项目设置
已成功获取Svg文件。现在，在vue3项目目录结构的src-assets文件夹下，新建一个文件夹fonts和子文件夹fonts/svg，把上面生成的所有svg单个文件都扔到fonts/svg下。
文件设置好了，现在开始项目的配置，让vue3可以流畅的管理和使用图标。
第一步，打开项目根目录下的命令行，运行npm i svg-sprite-loader -D-D，我们之所以需要安装依赖的svg-sprite-loader，是因为它可以自动将svg文件的代码插入符号标签中。
第二步：在项目根目录下新建一个文件vue.config.js。熟悉vue的同学应该知道vue.config.js是用来配置构建环境的。
vue.config.js详细配置参数，点击查询vue-cli官网。我们只需要知道如何配置svg-sprite-loader。
众所周知，vue-cli的构建环境是基于webpack的。通过在vue.config.js文件中添加各种配置参数，vue-cli最终会将这些参数合并到webpack的配置中。
这样我们就可以通过vue.config.js配置开发环境，而不需要直接操作webpack的配置文件。
目前，已经安装了svg-sprite-loader。现在需要将这个加载器加载到webpack的配置中，在vue.config.js中填入以下代码即可实现。
const resolve=require(path )。解决；
模块.导出={
chainWebpack(配置){
//简介图标
config . module . rule( SVG ). exclude . add(resolve(。/src/assets/fonts/SVG )；
规则( icon )。测试(/\。svg$/)
. include.add(resolve(。/src/assets/fonts/svg )。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
symboled: icon-[name]
});
}
}
系统学习过webpack配置的同学很容易看出上面代码的含义。上面的代码首先从中排除了rule中的svg规则集。/src/assets/fonts/svg 目录。
然后添加一个新的规则图标来包含。/src/assets/fonts/svg 目录，这是我们存储所有svg文件的文件夹。
接下来，代码使用。使用和。loader将svg-sprite-loader配置到项目环境中，并将symbolId设置为icon-[name]。
这里的symbolId与symbol标签生成的Id名称相关。如果symbolId设置为icon-[name]，当使用标签引用最后一页上的图标时，将使用icon-加文件名。
第三步：在assets/fonts下新建一个文件index.js(文件结构如下图所示)，填写下面两行代码。
这两行代码主要使用了webpack中的require.context函数，可以帮助我们自动引入文件模块。
require.context的第一个参数表示目标文件目录，第二个参数应用于子文件夹，第三个参数匹配文件格式。
const load=require.context(。/svg ，false，/\。SVG $/)；
load.keys()。地图(负载)；
在执行require.context之后，它将返回结果load，这是模块中引入的一个函数。此外，它还包含一个keys属性。当您执行load.keys()时，您将获得以下结果。
[./arrow.svg ，。/arrowon.svg ，。/downarrow.svg ，。/jiantou.svg ，。/trash.svg ，。/yiwenicon.svg]
从这里我们可以看到load.keys()会返回fonts/svg文件夹中所有图标的相对路径，然后使用loda函数加载这些路径的文件，从而实现所有以。fonts/svg文件夹中的svg。
然后，如果以后有添加图标的需要，先在iconfont网站下载一个单独的svg文件，然后直接扔到fonts/svg文件夹中，完成自动导入。
最后一步是在项目的入口文件main.js中调用第三步创建的index.js，自动导入所有svg文件(代码如下)。
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；//根组件
导入“@/资产/字体/索引”；//执行自动导入
从“@/router/index”导入路由器；//路由
createApp(应用程序)。使用(路由器)。挂载( # app )；
通过以上四个步骤，项目的配置基本完成，可以简单梳理一下整个操作流程。
入口文件main.js启动后，执行assets/fonts/index.js，启动所有svg文件的自动引入。
一旦svg-sprite-loader监视到以。svg在项目中，它会将这些SVG的所有代码内容封装成符号标签(如下图)，然后一起插入到页面文档中。
这将相当于svg-sprite-loader帮助我们注册页面上的所有svg图标，我们所剩下的就是引用页面上的图标。
图标引用
我们在Home主页下填入以下代码(渲染图如下所示)。将#icon- prefix拼接的字符串和fonts/svg下对应的文件名赋予xlink:href属性，就会渲染出文件对应的图标。
模板
div class=home
你好，世界
挽救（saving的简写）
使用xlink:href= # icon-trash rel= external no follow /！-使用图标-
/svg
/div
/模板
组件引用
使用svg并使用标签来引用页面上的图标是不优雅的。我们可以把它转换成组件。
在全局组件文件夹components下创建一个新文件Icon/index.vue。该组件接受两个参数name和color(代码如下)。
name参数对应要渲染的图标名称，color是要渲染的颜色。需要注意的是，svg的颜色只能通过fill属性修改，而color属性不起作用。
模板
svg :style={fill:color？颜色： }
使用：xlink:href= # icon- name rel= external no follow rel= external no follow /
/svg
/模板
脚本
导出默认值{
道具：{
名称：字符串，//图标名称
颜色：{ //图标颜色
类型：字符串，
无效：空
}
}
}
/脚本
现在参考主页上的图标组件(代码如下)。
渲染的图标被命名为trash，其颜色为蓝色(渲染如下所示)。
模板
div class=home
你好，世界
Icon name=trash color=blue/！-使用图标-
/div
/模板
脚本
从“@/components/Icon/index”导入图标；
导出默认值{
组件：{
图标
}
}
/脚本
多主题支持
从上面的解释中，我们可以看到，当我们给svg标签赋予样式属性fill时，最终图标的颜色也会发生变化，这使得我们可以满足多主题开发的需求。
接下来，我们设置一个场景，通过点击按钮在线切换主题，这样svg图标也可以随着主题的变化而变化。
配置多主题样式
在首选项目文件夹src/assets下创建一个新文件scss/variable.scss。代码内容如下。
代码定义了三个主题，即默认主题、主题1和主题2。每个主题都定义了自己的图标颜色和背景颜色。
代码的后半部分定义了三个mixins，分别用于设置fill、color和background-color属性。在每个mixin中，不同主题设置的颜色都是由自己的主题设置的。
//默认主题
$icon-color:红色；
$ background-color:# fff；
//主题1
$icon-color1:灰色；
$ background-color 1:# eee；
//主题2
$icon-color2:蓝色；
$ background-color 2:# 999；
//用于用颜色填充svg
@混合填充{
fill:$ icon-color；//默认颜色是默认主题
[data-theme=theme1] {//切换到主题1时的颜色
fill:$ icon-color 1；
}
[data-theme=theme2] {//切换到主题2时的颜色
fill:$ icon-color 2；
}
}
//设置颜色属性
@mixin颜色{
颜色：$ icon-color；//默认颜色是默认主题
[data-theme=theme1] {//切换到主题1时的颜色
color:$ icon-color 1；
}
[data-theme=theme2] {//切换到主题2时的颜色
color:$ icon-color 2；
}
}
//设置背景颜色
@ mixin backgroudColor {
背景色：$背景色；//默认颜色是默认主题
[data-theme=theme1] {//切换到主题1时的颜色
background-color:$ background-color 1；
}
[data-theme=theme2] {//切换到主题2时的颜色
background-color:$ background-color 2；
}
}
Variable.scss是一个全局多主题配置文件，在这个文件中，你不仅可以配置每个主题下要渲染的颜色，还可以配置字体大小、常用宽度等等。
写完配置文件后，现在需要引用项目。编辑器打开根目录中的vue.config.js项目配置文件，并添加以下代码。
const resolve=require(path )。解决；
模块.导出={
chainWebpack(配置){
//简介图标
config . module . rule( SVG ). exclude . add(resolve(。/src/assets/fonts/SVG )；
规则( icon )。测试(/\。svg$/)
. include.add(resolve(。/src/assets/fonts/svg )。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
symboled: icon-[name]
});
},
css: {
loaderOptions: {
scss: {
prepend data:` @ import @/assets/scss/variable . scss ；`
},
}
}
}
在module.exports中添加配置属性css，然后将我们上面写的多主题配置文件的路径填充到prependData的对应值中。
这里为了避免因sass版本不同导致文件导入失败，统一sass和sass-loader的版本。
“sass”:“1 . 26 . 5”，
sass-loader: 8.0.2 ，
vue.config.js配置完成后，重启应用程序，variable.scss已经全局注入到应用程序中。接下来，我们不需要使用@import来导入页面组件中的主题配置文件，可以直接使用variable.scss中定义的变量和mixin。
Icon改造
为了使图标响应主题变化，全局图标组件进行了以下代码更改。如果color属性传递了一个值，图标将根据传递的颜色呈现。如果颜色没有通过，决定图标颜色的因素就变成了类名icon。
模板
SVG class= icon :style= { fill:color？颜色： }
使用：xlink:href= # icon- name rel= external no follow rel= external no follow /
/svg
/模板
脚本
导出默认值{
道具：{
名称：字符串，
颜色：{
类型：字符串，
无效：空
}
}
}
/脚本
style lang=scss 范围。图标{
@包含填充；
}
/风格
fill对应的mixin在类名图标中调用，fill在文件变量. scss中的定义如下。
最后，它返回一个属性fill:color。默认情况下，填充的颜色值为$icon-color。
当页面文档的html标签上的属性data-theme值更改为theme1时，fill呈现的颜色就变成了Theme 1定义的颜色。类似地，通过切换到主题2，由Fill呈现的颜色变成由主题2定义的颜色。
//用于用颜色填充svg
@混合填充{
fill:$ icon-color；//默认颜色是默认主题
[data-theme=theme1] {//切换到主题1时的颜色
fill:$ icon-color 1；
}
[data-theme=theme2] {//切换到主题2时的颜色
fill:$ icon-color 2；
}
}
我们可以通过观察页面最终生成的dom结构来理解上述配置的目的。@mixin最终会在每个主题下生成一个样式的副本(如下图)，这样只要html标签的data-theme等于哪个主题，对应主题的样式表就会生效。
页面校验
为主页组件填写以下代码。在原页面的基础上增加了三个按钮：默认主题、主题1和主题2。
点击按钮触发updateTheme函数，将修改html标签上data-theme的属性值，从而实现主题切换的功能(效果图如下所示)。
模板
div class=home
你好，世界
Icon name=trash/！-使用图标-
Button @click=updateTheme()默认主题/按钮
Button @ click=更新主题( theme1 )主题1/button
Button @ click=更新主题( theme2 )主题2/button
/div
/模板
脚本
从“@/components/Icon/index”导入图标；
导出默认值{
组件：{
图标
},
方法：{
更新主题(名称){
If(name==null){ //采用默认主题
document . document element . remove attribute( data-theme )；
}否则{
document . document element . set attribute( data-theme ，name)；
}
}
},
}
/脚本
样式范围的语言=scss 。主页{
身高：100%；
@ include backgroudColor
}。标题{
@包含颜色；
}
/风格
最终效果图：
尾言
上面描述的多主题实现方案操作起来非常简单，但是不适合大型复杂的项目。
试想一下，如果一个大型项目包含十几个主题，每个主题下的css代码都很庞大，那么将所有主题下的样式代码一次性注入到应用中是不合适的。
最好的做法应该是，当用户点击切换某个主题时，按需加载该主题的样式，然后注入到应用中进行渲染，这样可以大大提高整体性能。关于最佳实践，请参考社区中关于多主题切换的文章。
关于vue引入iconfont图标库的这篇文章就到这里了。更多关于vue对iconfont的介绍，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
源代码
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。