vue导入图标的3种方式【阿里图标】

时间:2022-05-14
本文章向大家介绍vue导入图标的3种方式【阿里图标】,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

点击【 Font class 】- 【 下载至本地 】,解压之后导入到项目【/src/assets/icon】,这个是【iconfont.css】文件。

然后在main.js中导入

import '@/assets/icon/iconfont.css'

然后引用就行

<span class="iconfont con-gouwuche-"></span>

第二种方式 Symbol

点击【 Symbol 】- 【 下载至本地 】,解压之后导入到项目【/src/assets/iconfont】 目录下。

 在main.js中引用

// symbol 引用
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
//设置全局icon样式 
import '@/assets/iconGloble.css'

全局定义下对icon对图标进行基础设置,比如图标的宽高等。创建【/src/assets/iconGloble.css】文件   建议在各个页面根据需要去自定义

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

在用图标的组件中使用。
注意:

    • class="icon"这个【icon】类名是设置图标的基础样式css样式类名。
    • xlink:href="#icon-xin" 就是css中的样式类名,但是#必需要加
    •  <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-xin"></use>
          </svg>

后期追加图标

两种方式,其实都差不多。首先在【assets/iconfont/iconfont.css】中将你要追加的图标css样式加入,或者整个css文件的内容直接替换。点击【点此复制代码】后会在网页上打开一个新窗口,里面都是css样式

  • 如果有很多新图标,但只需要添加一个的话,就只复制一个你需要的图标样式,然后追加到原css样式中。
    • js也是同样处理,copy内容从…结束,然后追加到原来的js文件中。
  • 如果多个新图标都需要的话,直接整个内容copy-paste就好。

原文地址:https://www.cnblogs.com/wx18638101223/p/16269537.html