vue-cli3.x使用svg可复用图标

vue-cli3.x使用svg可复用图标

在使用svg绘制时，对于可复用的图元，我们一般会使用标签<symbol>，然后将每个图元放到symbol中，并设置唯一id。需要使用该图元时直接use调用。

<use xlink:href="#id"/>

vue中提供了相应组件 svg-sprite-loader，svg-sprite-loader就是利用该原理，将每一个.svg放到symbol中。

下面拿一个空脚手架介绍下配置及使用过程：

1、下载 svg-sprite-loader

npm i svg-sprite-loader -S

2、配置vue.config.js

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
const port = 8086
module.exports = {
    outputDir: 'dist',
    lintOnSave: true,
    // 是否为生产环境构建生成 source map
    productionSourceMap: false,
    devServer: {
        host:'127.0.0.1',
        port: port
    },
    configureWebpack: {
        // 配置alias
        resolve: {
          alias: {
            '@': resolve('src')
          }
        }
      },
    chainWebpack: (config) => {
        // 删除之前所有svg规则
        config.module.rules.delete("svg");
        config.module
            .rule('svg')
            .test(/\.svg$/)
            .include
            .add(resolve('src/icons/svg'))  //指定.svg存放目录,对于不需要指定的.svg可以使用exclude
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'  // 规定每个图元的id,可修改,只要use时是#id的形式即可
            })
    }
}

3、在src/components/SygIcon中编写使用组件

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

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`  // 确保use格式正确
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

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

4、全局挂载组件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

5、在src/icons/svg路径下编写可复用图元。对于图标类的可以直接去阿里icon官网下载。

6、页面使用

<svg-icon iconClass="draw" />

整体目录

1.png