vue中使用svg组件

最新推荐文章于 2025-03-26 15:12:37 发布

解勾股

最新推荐文章于 2025-03-26 15:12:37 发布

阅读量489

点赞数

分类专栏：每天一篇防止抑郁

本文链接：https://blog.youkuaiyun.com/qq_36824244/article/details/103309287

版权

每天一篇防止抑郁专栏收录该内容

12 篇文章

订阅专栏

安装依赖

	npm i -D svg-sprite-loader

1、在src下面建立icon目录，存放svg图标

在这里插入图片描述

2、封装SvgIcon组件

/components/SvgIcon/index.vue

<template>
	<svg :class="svgClass" aria-hidden="true">
		<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: 1rem;
		height: 1rem;
		fill: currentColor;
		overflow: hidden;
	}
</style>

3、在icon文件中建立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/index.js

注意: 不导入icons，直接进行步骤6页面会报错svg-icon没有正确注册

import '@/icons'

5、修改vue.config.js配置

注意： 不配置这一步的话页面svg是空的，因为没有对.svg文件进行处理

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
	
module.exports = {
	 chainWebpack: config => {
	 	const svgRule = config.module.rule("svg");
	    svgRule.uses.clear();
	    svgRule.exclude.add(/node_modules/);
	    svgRule
	      .test(/\.svg$/)
	      .use("svg-sprite-loader")
	      .loader("svg-sprite-loader")
	      .options({
	        symbolId: "icon-[name]"
	      });
	
	    const imagesRule = config.module.rule("images");
	    imagesRule.exclude.add(resolve("src/icons"));
	    config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);
	 }
};

6、在需要的页面中直接使用

<ul class="wrapflex">
	<li
		class="shadow lh30 blodliner-red"
		@click="toTrade(item)"
	>
		<div>
			<svg-icon v-bind:icon-class="item.varietyType.toUpperCase().replace('USDT', '')"></svg-icon>
		</div>
	</li>
</ul>