标签：vue return icons svg str path 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,return,icons,svg,str,path,icon
来源： https://blog.csdn.net/ninjia250/article/details/116857827

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。