Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可

最新推荐文章于 2025-02-28 15:31:29 发布

viceen

最新推荐文章于 2025-02-28 15:31:29 发布

阅读量8.7k

点赞数 10

分类专栏： vue项目-运维工具 vue-评分-前后台文章标签： vue css html js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/108698021

版权

工具同时被 3 个专栏收录

163 篇文章

订阅专栏

vue项目-运维

111 篇文章

订阅专栏

vue-评分-前后台

36 篇文章

订阅专栏

本文介绍如何在Vue项目中集成阿里巴巴的Iconfont图标库，包括创建项目、下载图标、本地部署及样式调整等步骤，并提供两种使用方法：类名方式和SVG方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可

下载图标

先进入iconfont.cn页面

iconfont官网：https://www.iconfont.cn/

方法见上

使用一

准备工作

1、先注册，再登录、找到图标管理、我的项目

在这里插入图片描述

2、点紫色的这个创建自己的项目

在这里插入图片描述

新建项目界面如下

在这里插入图片描述

3、图中画蓝线的地方很重要

1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。
如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来
2）、FontFamily随便起一个名字，你能记住就行

4、项目创建完了，你可以往项目里面添加自己想要的图标了

实例-想要一个法律的图标

在这里插入图片描述

1、搜索之后能找出来好多不一样的法律图标，找到你想要的图标，点击添加入库，当你点击完之后，购物车会出现你刚才添加入库的数量；

点添加至项目，这时候回弹出来你刚才创建好的项目，选中你刚创建好的项目，在点击下面的确定

在这里插入图片描述

2、图标添加完毕！找到我的项目->你刚才创建的那个项目->点击下载到本地

在这里插入图片描述

3、你会得到一个压缩包，打开这个压缩包，里面有一些文件是没用的。画红线的留着，其他没画的可以删除

在这里插入图片描述

搭建项目

1、在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为icon的文件夹，将上面第3步中画红线的文件拷贝到icon文件夹中。

在这里插入图片描述

2、找到项目中的main.js文件，导入iconfont.css样式

在这里插入图片描述

3、打开iconfont.css文件你会看到：

在这里插入图片描述

上面的是，你创建项目时候定义的字体，下面的是你一会要引入的样式类名（就是你想要的图标）

4、ok我们这回终于可以引用图标了

<div class="top-b">
    <span class="iconfont iconfalv"></span> //记住别写错！！
</div>

在这里可以根据这个类名改变这个图标的字体大小、颜色…

.iconfalv {
  font-size: 50px;
  color: blue;
}

我习惯用引入类名方式，当然还有icon=“iconfont iconfalv” 这种方式

5、效果展示

在这里插入图片描述

总结

引入的图标是不是比你平时引入的img高大尚很多，它还可以支持css的语法，文件体积还小，还可以让其不和element-ui图标冲突

使用二

1、在同上，下载完图标后，找到项目中的main.js文件，导入iconfont.js文件

在这里插入图片描述

2、打开iconfont.css文件你会看到：

在这里插入图片描述

3、在单页面中使用svg方式引用图标了

<div class="top-b">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#iconfalv" />  //与iconfont.js中的id命名一致
    </svg>
    <span class="iconfont iconfalv1"></span>
</div>

在这里可以根据这个类名改变这个图标的字体大小、颜色…

.icon {
  width: 60px;
  height: 60px;
  color:red;
  // width: 1em;
  // height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

4、显示效果

在这里插入图片描述
注意：
svg图标样式，不支持直接修改图标颜色

svg图标颜色的解决方案

1、用编辑器打开iconfont.js文件，搜索fill="#202A35"中的fill="# ，删除fill="#xxx"后即可通过css进行修改。

2、修改svg图标样式

.icon {
  width: 60px;
  height: 60px;
  color:red;
  // width: 1em;
  // height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3、显示效果

在这里插入图片描述
注意

在iconfont.cn官网上，选中项目中的文件，应用批量操作 -> 批量去色。

在这里插入图片描述

使用三：html页面中使用svg图标

1、用编辑器打开iconfont.js文件，搜索fill="#202A35"中的fill="# ，删除fill="#xxx"后即可通过css进行修改。

2、html实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 不能忘记引入css样式文件 -->
    <link rel="stylesheet" href="./iconfont.css" />
    <script src="../css/iconfont.js" type="text/javascript"></script>
</head>
<style>
    .icon {
        width: 160px;
        height: 160px;
        color: red;
        /* // width: 1em;
        // height: 1em; */
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

<body>
    <span> iconfont图标的使用：</span>
    <svg class="icon" style="font-size: 100px; color: pink" aria-hidden="true">
      <use xlink:href="#iconfalv" />
    </svg>
    <i style="font-size: 100px; color: blue" class="iconfont">&#xe6d3;</i>
</body>

</html>

html页面-效果：

在这里插入图片描述