【vue】使用 svg 文件

转载：https://blog.csdn.net/ww_1069955/article/details/119684898

准备

在 阿里巴巴图标库 中下载 svg 文件，放在 src/icons/svg文件夹下，文件命名与使用时一致即可

实现

1. 安装

   npm i svg-sprite-loader

2. 配置 vue.config.js

   const path = require("path");
   function resolve(dir) {
     return path.join(__dirname, dir);
   }
   
   module.exports = {
     chainWebpack(config) {
       // set svg-sprite-loader
       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();
     }
   };
   
   

3. 注册全局 svg-icon 组件

   // /src/component/svgIcon.vue
   
   <template>
     <svg>
       <use :xlink:href="`#icon-${iconName}`" />
     </svg>
   </template>
   
   <script>
   export default {
     props: {
       iconName: {
         type: String,
         require: true
       }
     }
   };
   </script>
   <style lang="less" scoped>
   svg {
     width: 1em;
     height: 1em;
     vertical-align: -0.2em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>
   
   

   // /src/icons/index.js
   
   import Vue from "vue";
   import svgIcon from "@/components/svgIcon";
   Vue.component("svg-icon", svgIcon);
   
   const req = require.context("./svg", false, /\.svg$/);
   const requireAll = requireContext => requireContext.keys().map(requireContext);
   requireAll(req);
   
   
   

4. 在 main.js 中引入

   // main.js
   
   import Vue from 'vue'
   import '@/icons'
   import App from './App.vue'
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')
   
   

5. 在需要的地方使用

     <svg-icon iconName="user" class="user"></svg-icon>
   

6. 为 svg 绑定点击事件

    <a href="#" @click="doLogout()">
                 <svg-icon iconName="logout" class="logout"></svg-icon>
               </a>