Vue项目中使用自定义Icon图标的两种方法

Vue项目中使用自定义Icon图标的两种方法

引用

CSDN

1.

https://blog.csdn.net/qq_51554230/article/details/137092402

在Vue项目中使用自定义图标可以提升界面的个性化和美观度。本文将介绍两种在Vue项目中使用自定义Icon图标的方法，包括详细的步骤和代码示例，帮助开发者快速掌握这一技能。

方法一：

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>

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

建议：

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