vue怎么封装自己的Svg图标组件库

vue如何封装自己的Svg图标组件库(svg-sprite-loader)

这篇文章主要介绍了vue如何封装自己的Svg图标组件库(svg-sprite-loader)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一. 安装依赖

npm install svg-sprite-loader --save-dev   
OR
yarn add svg-sprite-loader

二. 配置 vue.config.js(主要为打包进行设置)

module.exports = {
  chainWebpack:config=>{
    // svg图标加载
    config.module
        .rule('svg')
        .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
        .end()

    config.module
        .rule('icons')// 定义一个名叫 icons 的规则
        .test(/\.svg$/)// 设置 icons 的匹配正则
        .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
        .end()
        .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
        .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
        .options({// 该 svg-sprite-loader 的配置
          symbolId:'icon-[name]'
        })
        .end()
  }
}

三. 封装 Svg 组件

1.0 在src/components下新建文件夹及文件SvgIcon/index.vue，index.vue添加如下内容:

 <template>
  <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
  <svg v-else class="svg-icon" aria-hidden="true">
    <use :xlink:href="`#icon-${iconFileName}`" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconFileName: {
      type: String,
      required: true
    }
  }
}
</script>

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

2.0 在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件，将svg图片放入svg文件夹中,在 index.js文件中添加如下内容

const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
    // requireContext.keys()数据：['./404.svg', './add.svg', './del.svg', './user.svg']
    requireContext.keys().map(requireContext)
}
requireAll(req)

3.0 在main.ts中全局注册引入

import  SvgIcon from '@/components/SvgIcon/index.vue'
import  '@/assets/icons/index.js'

// 全局注册svg组件
Vue.component('svg-icon', SvgIcon)

四.在组件中使用

<div>
	<svg-icon icon-file-name="add"></svg-icon>
	<svg-icon icon-file-name="del"></svg-icon>
	<svg-icon icon-file-name="user"></svg-icon>
</div>

五.附加结构图

: