vue之svg-icon组件使用

逃离我推掉我的手 2022-12-10 10:13 284阅读 0赞

##### 一、添加相关依赖包 #####

当前使用的vue版本为2.6.11，加入库svg-sprite-loader  
package.json新增如下：

"devDependencies": { 
        "svg-sprite-loader": "^4.1.6",
         ...
      },

##### 二、新增SvgIcon组件 #####

##### 1.在components文件下新建SvgIcon组件 #####

![在这里插入图片描述][20200925151632468.png_pic_center]

SvgIcon下的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>

##### 2.新增icon文件夹相关内容 #####

在src下 新增icon目录，如下  
![在这里插入图片描述][20200925151904613.png_pic_center]  
svg文件夹下存放svg格式的文件，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)

##### 3.main.js中引入icons文件 #####

main.js中添加 import ‘./icons’，文件如下：

import {  createApp } from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import './icons'
    createApp(App)
      .use(store)
      .use(router)
      .mount("#app");

##### 3.在vue.config.js文件下配置svg-sprite-loader #####

##### 三、svg文件的使用 #####

test为svg目录下的test文件

svg文件可以在[iconfont][]里面获取

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]

效果图：  
![在这里插入图片描述][20200925152503289.png_pic_center]  
查看dom结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center 1]

[20200925151632468.png_pic_center]: /images/20221123/62ce750010be4831882a611abfcead7e.png
[20200925151904613.png_pic_center]: /images/20221123/ef44d25fee5142ed8dd982daaa220945.png
[iconfont]: https://www.iconfont.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/155e07a348fa481fb65ba811a0c39fff.png
[20200925152503289.png_pic_center]: /images/20221123/90ee5de1f61141e0916619d3e3f61621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7d296f4ad11b439684887454aed86fee.png