vue项目中使用自定义Icon图标

夢☆Meng

已于 2024-03-28 23:16:43 修改

阅读量4k

点赞数 10

分类专栏： vue 文章标签：前端 vue.js

于 2024-03-28 18:16:09 首次发布

本文链接：https://blog.csdn.net/qq_51554230/article/details/137092402

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在网页中使用阿里巴巴矢量库的两种方法，包括创建项目、添加图标、编写iconfont.js、引入并应用图标，以及注意事项，适用于前端开发人员。

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

方法一：

1、创建项目

在阿里巴巴矢量库中，找到我的项目，创建一个项目

2、添加图标到项目中

将加入库的图标加入到项目中去

3、复制代码

选择自己喜欢的方式进行，不知道的可以看使用帮助。

4、创建iconfont.js

在assets包下创建iconfont.js文件，将复制的东西全部粘贴到文件中

5、在main.js中进行引入

// 引入自定义Icon,方法一
import './assets/iconfont.js'

6、应用于页面

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

7、完成

图标大小，自己修改一下，设置一下图标的width和height。

方法二：

1、将需要的图标添加入库

2、下载图标

将下载的图标压缩包进行解压，密名为Iconfont，放入到assets包下

3、打开demo——index.html

4、选择导入方法

有Unicode、Font class、Symbol三种方法，选择自己喜欢的方式进行导入图标

5、在mian.js中添加代码

// 引入自定义Icon，方法二
import './assets/Iconfont/iconfont.js'

6、加入通用css

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

7、应用于页面

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

注意：

xlink:href="#icon-xxx" 中，我们需要将xxx换成我们对应的图标的名称（user）。

完成页面

建议：

使用方法一导入自定义的Icon图标，后期增加新的图标，只需要加入当阿里巴巴矢量库中的项目中，重新复制代码粘贴到iconfont.js文件中就可以了。

注意：在我们进行导入Icon图标时，选择不同的方法，在main.js中导入的文件不一样，有js,css等后缀的文件。