vue-cli通过symbol引用阿里iconfont图标_本地引用 symbol-CSDN博客

本文链接：https://blog.csdn.net/yuryS/article/details/108217188

官方文档中已经说明symbol引用方式有以下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式
兼容性较差，支持 ie9+,及现代浏览器
浏览器渲染svg的性能一般，还不如png

symbol的本地引用可以防止出现网络不稳定图标加载不出来等问题，在线引用更方便图标的更新

方法一本地引用：

在iconfont下载图标包，解压后放到assets中。
创建css文件写入通用css代码

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

在main.js中引入1中的iconfont.js和2中的css文件

在这里插入图片描述

使用示例：
Ⅰ、封装图标使用组件iconFont.vue 在需要使用图标的地方直接调用子组件，并传入iconClass（图标尺寸）、iconHref（图标地址）就可以了

<!-- iconFont.vue -->
<template>
  <div>
      <!-- 应用阿里icon组件  官方固定写法  不封装也可以在页面中直接使用-->
    <svg :style="{width:iconClass.width,height:iconClass.height}" aria-hidden="true">
      <use :xlink:href="'#'+iconHref" />
    </svg>
  </div>
</template>
<script>
export default {
    props:['iconClass','iconHref']
    //传入的iconClass写法  iconClass: { width: "20px", height: "20px", },
}
</script>

Ⅱ、父组件中引用组件
点击图标的‘复制代码’获取到iconHref：

<iconFont :iconClass="iconSize" :iconHref="'你的图标链接'"></iconFont>

import iconFont from './iconFont'
export default {
  data() {
    return {
      iconSize:{
        width:'20px',
        height:'20px'
      }
    };
  },
 }