vue中封装svg-icon组件并使用

Posted 2022-03-21 爱上口袋的天空

1. 新建的vue项目结构
    
2. components文件下新建SvgIcon组件
    
    index.vue文件中代码
    

   <template>
     <svg :class="svgClass" aria-hidden="true">
       <use :xlink:href="iconName"></use>
     </svg>
   </template>
   
   <script type="text/ecmascript-6">
   export default 
     name: 'svg-icon',
     props: 
       iconClass: 
         type: String,
         required: true
       ,
       className: 
         type: String
       
     ,
     computed: 
       iconName () 
         return `#icon-$this.iconClass`
       ,
       svgClass () 
         if (this.className) 
           return 'svg-icon ' + this.className
          else 
           return 'svg-icon'
         
       
     
   
   </script>
   
   <style>
   .svg-icon 
         width: 1em;
         height: 1em;
         vertical-align: -0.15em;
         fill: currentColor;
         overflow: hidden;
     
   </style>

    

3. 将所需svg文件放置icons的svg文件夹下
    
    icons文件下的index.js文件中的代码如下：
    
    

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

    

4. main.js中引入icons文件
    
5. 安装svg-sprite-loader，并且创建vue.config.js文件
    命令：
          npm install svg-sprite-loader --save
     vue.config.js文件内容如下：
     

   const path = require('path');
   function resolve(dir) 
     return path.join(__dirname, '.', dir);
   
   module.exports = 
     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]'
       );
     
   
   

    

6. 最后直接在组件中使用icon-class为svg名字的图标即可