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

目录

方法一：

1、创建项目

2、添加图标到项目中

3、复制代码

4、创建iconfont.js

5、在main.js中进行引入

6、应用于页面

7、完成

方法二：

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

2、下载图标

3、打开demo——index.html

4、选择导入方法

5、在mian.js中添加代码

6、加入通用css

7、应用于页面

完成页面

建议：

---

方法一：

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等后缀的文件。