Vue项目中使用svg图标

一、配置

1. 安装依赖

   npm install svg-sprite-loader --save-dev
   

2. 配置build文件夹中的webpack.base.conf.js

   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'url-loader',
     exclude: [resolve('src/assets/icons')],   //需要添加的内容
     options: {
       limit: 10000,
       name: utils.assetsPath('img/[name].[hash:7].[ext]')
     }
   },
   { // 需要添加的内容
     test: /\.svg$/,
     loader: 'svg-sprite-loader',
     include: [resolve('src/assets/icons')],
     options: {
       symbolId: 'icon-[name]'
     }
   }
   

3. 在src/components下新建文件夹及文件svgIcon/index.vue，index.vue中内容如下:

   <template>
     <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
       <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}`
         },
         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. 在plugins下新建svg-icon文件夹，及svg-icon下文件夹下index.js文件，index.js文件内容如下:

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

5. 在main.js中引入svg

   import '@/plugins/svg-icon'
   

二、使用
6. 下载svg图片，这里使用阿里云提供的
7. 点击图片，下载svg格式即可，将下载下来的图片放置到到项目中的svg文件夹下
8. 在页面中使用：

<svg-icon icon-class="import"></svg-icon>