本文主要是介绍在vue 中 封装svg-icon全局组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

.svg是一种通过代码的方式来展示的图片格式（.png, .gif.....），

学习网站：https://www.runoob.com/svg/svg-tutorial.html

在https://www.iconfont.cn/ 去下载你要用的svg

1.安装  svg-sprite-loader@4.1.3  模块，及对应的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()
	    }
  }

2.在src/icons/下 新建index.js 文件 配置如下代码:

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

import '@/icons/index.js' 最后引入到man.js文件中 

3.在src/icons/下 新建svg文件夹  建立  图标名.svg 文件,文件内写入svg图代码既可

4.在 components / SvgIcon 下 新建 index.vue 文件 配置如下代码:

	<template>
	  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
	  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
	    <use :xlink:href="iconName" />
	  </svg>
	</template>
	<script>
	// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
	import { isExternal } from '@/utils/validate'
	export default {
	  name: 'SvgIcon',
	  props: {
	    iconClass: {
	      type: String,
	      required: true
	    },
	    className: {
	      type: String,
	      default: ''
	    }
	  },
	  computed: {
	    isExternal() {
	      return isExternal(this.iconClass)
	    },
	    iconName() {
	      return `#icon-${this.iconClass}`
	    },
	    svgClass() {
	      if (this.className) {
	        return 'svg-icon ' + this.className
	      } else {
	        return 'svg-icon'
	      }
	    },
	    styleExternalIcon() {
	      return {
	        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
	        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
	      }
	    }
	  }
	}
	</script>
	<style scoped>
	.svg-icon {
	  width: 1em;
	  height: 1em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
	.svg-external-icon {
	  background-color: currentColor;
	  mask-size: cover!important;
	  display: inline-block;
	}
	</style>

5. 在 scr / utils 文件下 新建 validate.js 文件 配置如下代码:

	/**
	 * @param {string} path
	 * @returns {Boolean}
	 */
	 export function isExternal(path) {
	    return /^(https?:|mailto:|tel:)/.test(path)
	  }
	  
	  /**
	   * @param {string} str
	   * @returns {Boolean}
	   */
	  export function validUsername(str) {
	    const valid_map = ['admin', 'editor']
	    // 对于传入的str，检查它是否在valid_map中存在
	    return valid_map.indexOf(str.trim()) >= 0
	  }
	  
	  /**
	   * @param {string} str
	   * @returns {Boolean}
	   */
	  export function validmobile(str) {
	    // 正则校验
	    return /^1[3-9]\d{9}$/.test(str)
  }

使用方法:

它的使用格式   <svg-icon icon-class="svg图标文件名" />  。  这里的文件名就是在src/icons/svg下的文件名

这篇关于在vue 中 封装svg-icon全局组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！