vue项目 - 封装icon-svg组件并使用

1. 写一个公共icon组件

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

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

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

2. 引入使用 - main.js

//公共组件 - 对菜单栏icon的处理
import IconSvg from './components/LLsvgIcon';
// 注册 svg 组件
Vue.component(IconSvg.name, IconSvg);
// 自动导入svg文件，把 svg 格式的文件放在某一文件夹下./assets/svg
const iconRequest = require.context('./assets/svg', false, /\.svg$/);
// keys方法 返回的该模块可以处理的所有可能请求的模块的数组
iconRequest.keys().forEach(iconRequest);

3. 配置svg - 记得安装依赖
   安装依赖 - cnpm install --save svg-sprite-loader
   配置 - 在vue.config.js文件中

const path = require('path')
module.exports = {
  // 配置 svg
  chainWebpack: config => {
    config.module.rules
      .delete('svg'); // 重点:删除默认配置中处理svg
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(path.join(__dirname, 'src/assets/svg')) // 处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();
  }
};

4. 正常使用即可

<icon-svg icon-class="iconName-svg文件名"></icon-svg>

亦可正常循环使用

<icon-svg :icon-class="item.iconName"></icon-svg>