关于前端:vue项目中封装iconsvg组件

1、设置组件 component/icon-svg.vue

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

<script>
export default {
  name: "svgClass",
  props: {
    //  应用 icon 的图标类型
    iconClass: {
      type: String,
      required: true,
    },
    // 是否增加 class 款式
    className: {
      type: String,
      default: ""
    }
  },
  computed: {iconName() {return `#icon-${this.iconClass}`;
    },
    svgClass() {if (this.className) {return `svg-icon ${this.className}`;
      } else {return `svg-icon`;}
    }
  }
};
</script>

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

2、注册全局组件，在 src 目录下新建文件夹icons，构造如下

icons/svg放所有的 svg 类型的图标，在 index.js 中注册

// index.js
import Vue from 'vue'
import icon from '@/components/icon-svg.vue'
// 注册到全局组件
Vue.component('icon-svg', icon)

// 将./svg 下不包含子目录的所有后缀名.svg 的文件赋值给变量 req
const req = require.context('./svg', false, /\.svg$/)
// 函数 全副导入
const importAll = (r) => r.keys().map(r)

importAll(req)

3、main.js中进行导入：import '@/icons'
4、webpack 配置

// vue.config.js
const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = {
  transpileDependencies: true,
  chainWebpack: (config) => {config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({symbolId: 'icon-[name]' })
      .end()},
}

5、我的项目中应用组件

  <div>
    <icon-svg icon-class='Cloudy'></icon-svg>
    <icon-svg icon-class='aa'></icon-svg>
    <icon-svg icon-class='asdf'></icon-svg>
  </div>