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

2022-07-24 08:28:55

vue中使用svg图片有很多便捷方式,在这里记录一下模仿参考的过程,仅做一标记,方便后续回来查找

1.使用vue-cli3.0脚手架运行搭建一个项目,地址

截图如下:
在这里插入图片描述

2.components文件下新建SvgIcon组件

在这里插入图片描述
文件中的代码如下:

<template><svg:class="svgClass" aria-hidden="true" v-on="$listeners"><use:xlink:href="iconName"/></svg></template><script>exportdefault{
  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>

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 req= require.context('./svg',false,/\.svg$/)const requireAll= requireContext=> requireContext.keys().map(requireContext)requireAll(req)

4.main.js中引入icons文件

在这里插入图片描述

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

在这里插入图片描述

6.注意:安装svg-sprite-loader,并且在vue.config.js文件下配置

在这里插入图片描述

7.运行项目,显示图标

在这里插入图片描述

参考地址:https://juejin.im/post/59bb864b5188257e7a427c09
转载:https://www.cnblogs.com/lhjfly/p/10756650.html

  • 作者:行走的小海豚
  • 原文链接:https://blog.csdn.net/shenzhishijian/article/details/122471043
    更新时间:2022-07-24 08:28:55