vue之svg-icon组件使用

逃离我推掉我的手 2022-12-10 10:13 320阅读 0赞
一、添加相关依赖包

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

  1. "devDependencies": { 
  2.     "svg-sprite-loader": "^4.1.6",
  3.      ...
  4.   },
二、新增SvgIcon组件
1.在components文件下新建SvgIcon组件

在这里插入图片描述

SvgIcon下的index.vue组件内容如下：

  1. <template>
  2.   <svg :class="svgClass"
  3.        aria-hidden="true"
  4.        v-on="$listeners">
  5.     <use :xlink:href="iconName" />
  6.   </svg>
  7. </template>
  8. <script>
  9. export default { 
  10.   name: 'SvgIcon',
  11.   props: { 
  12.     iconClass: { 
  13.       type: String,
  14.       required: true
  15.     },
  16.     className: { 
  17.       type: String,
  18.       default: ''
  19.     }
  20.   },
  21.   computed: { 
  22.     iconName () { 
  23.       return `#icon-${ this.iconClass}`
  24.     },
  25.     svgClass () { 
  26.       if (this.className) { 
  27.         return 'svg-icon ' + this.className
  28.       } else { 
  29.         return 'svg-icon'
  30.       }
  31.     }
  32.   }
  33. }
  34. </script>
  35. <style scoped>
  36. .svg-icon { 
  37.   width: 1em;
  38.   height: 1em;
  39.   vertical-align: -0.15em;
  40.   fill: currentColor;
  41.   overflow: hidden;
  42. }
  43. </style>
2.新增icon文件夹相关内容

在src下 新增icon目录，如下
在这里插入图片描述
svg文件夹下存放svg格式的文件，index.js文件内容如下：

  1. import Vue from 'vue'
  2. import SvgIcon from '@/components/SvgIcon' // svg组件
  4. // register globally
  5. Vue.component('svg-icon', SvgIcon)
  7. const req = require.context('./svg', false, /\.svg$/)
  8. const requireAll = requireContext => requireContext.keys().map(requireContext)
  9. requireAll(req)
3.main.js中引入icons文件

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

  1. import {  createApp } from "vue";
  2. import App from "./App.vue";
  3. import router from "./router";
  4. import store from "./store";
  5. import './icons'
  6. createApp(App)
  7.   .use(store)
  8.   .use(router)
  9.   .mount("#app");
3.在vue.config.js文件下配置svg-sprite-loader
  1. const path = require("path");
  2. function resolve(dir) { 
  3.   return path.join(__dirname, dir);
  4. }
  5. module.exports = { 
  6.   chainWebpack(config) { 
  7.     // set svg-sprite-loader
  8.     config.module
  9.       .rule("svg")
  10.       .exclude.add(resolve("src/icons"))
  11.       .end();
  12.     config.module
  13.       .rule("icons")
  14.       .test(/\.svg$/)
  15.       .include.add(resolve("src/icons"))
  16.       .end()
  17.       .use("svg-sprite-loader")
  18.       .loader("svg-sprite-loader")
  19.       .options({ 
  20.         symbolId: "icon-[name]"
  21.       })
  22.       .end();
  23.   },
  24. };
三、svg文件的使用

test为svg目录下的test文件

  1. <template>
  2.   <div>
  3.     <svg-icon iconClass="test"/>test
  4.   </div>
  5. </template>

svg文件可以在iconfont里面获取

在这里插入图片描述

效果图：
在这里插入图片描述
查看dom结构如下：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue组件使用方法

    Vue 组件是 Vue.js 应用中可复用的代码块，通过组件可以将一个页面拆分为多个独立的部分，使代码更加清晰，结构更加简洁。以下是使用 Vue 组件的步骤： -------

    亦凉亦凉/ 0 赞/ 166 阅读

    相关 如何使用vue组件

    目录 1：组件之间的父子关系 2：使用组件的三个步骤 3：components组件的是私有子组件 4：在main.js文件中使用Vue.component全局注册组件

    傷城~傷城~/ 0 赞/ 102 阅读

    相关 Vue 组件之使用props传递数据

    组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。

    Dear 丶Dear 丶/ 0 赞/ 1019 阅读