如何在vue里使用阿里图标

做前端开发， 不可避免的需要使用图标， 一直都有接触图标， 然后也一直碰到各种各样的问题， 因此想做个记录， 这里以阿里图标为例

安装环境

1： node
2： vue 3: elementUI

阿里图标unicode图标

下载文件 放入组件中 只需要引入一个文件 加上css样式

<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>

完整实例

<template>
  <div>
      unicode  
    <i class="iconfont">&#xe6ef;</i><br>
      <i class="iconfont">&#xe6ef;</i><br>
        <i class="iconfont">&#xe6ef;</i><br>
          <i class="iconfont">&#xe6ef;</i><br>
           fontclass 
             <i class="iconfont icontaobao">&#xe6ef;</i>
  </div>
</template>
<script>
import "./iconfont.css";
export default {};
</script>
<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>

阿里图标fontclass 引用

1: 引入fontcss

<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>

2: 完整实例

<template>
  <div>
      unicode  
    <i class="iconfont">&#xe6ef;</i><br>
      <i class="iconfont">&#xe6ef;</i><br>
        <i class="iconfont">&#xe6ef;</i><br>
          <i class="iconfont">&#xe6ef;</i><br>
           fontclass 
             <i class="iconfont icontaobao">&#xe6ef;</i>
  </div>
</template>
<script>
import "./iconfont.css";
export default {};
</script>
<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>

symbol引用

1: 阿里的方法 引入iconfont.js

2： 引入css

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

完整实例

<template>
<div>
<span class="svg-container">
    symbol 图标
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconall"></use>
</svg>
</span>
</div>
</template>
<script>
import "./iconfont.js";
export default {
  name: "icons"
};
</script>
<style type="text/css">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

2 有关于symbol的扩展

a: 创建组件

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

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style> 

b: 全局注册组件

import IconSvg from'./components/symbol/Icons'
Vue.component('icon-svg', IconSvg)

c: 自动引入svg图标 在main.js 文件中引入

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('../../icons', false, /\.svg$/);
const icons = requireAll(req);
console.log(icons);
export default icons;

main.js

import './components/symbol/index.js'

d： webpack 里的svg-sprite-loader将svg 转换

const path = require('path')

// 获取绝对路径
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
    // baseUrl: "/",
    // // 输出目录
     outputDir: "dissst",
     // 是否为生产环境构建生成 source map？
    productionSourceMap: false,
    lintOnSave: false,
    chainWebpack(config) {
        // set svg-sprite-loader
        // 第一步：让其他svg loader不要对src/assets/imgs/svgs进行操作
        config.module
            .rule("svg")
            .exclude.add(path.resolve(__dirname, 'src/icons'))
            .end();
        // 第二步：使用svg-sprite-loader 对 src/assets/imgs/svgs下的svg进行操作
        config.module
            .rule("icons")
            .test(/\.svg$/)
            .include.add(path.resolve(__dirname, 'src/icons'))
            .end()
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
            .options({
                symbolId: "[name]"
            })
            .end();
    }
}

占坑

1 ： 注意：symbolId: "[name]" 和 引用时的语法有关联

a: options可以不要，默认的id是svg的文件名=name；

b: 使用svg时，id形式与symbol保持一致 具体可参考：

工作原理

svg-sprite-loader实际上是把所有的svg打包成一张雪碧图，类似下图。每一个symbol装置对应的icon， 再通过来显示你所需的icon

最后附上gitHub地址 ： 阿里图标的使用