Vue3.x中使用svg图标

安装、配置插件

1、安装

npm install -----------------

2、配置：在 vue.config.js 中增加下面配置

'use strict'

const ---- = require('path');

------.------- = {
	// other .....
	chainWebpack: config => {
		------.------.-----.delete("svg");
		------.------
			.rule('svg-sprite-loader')
			.test(/\.svg$/)
			.-------
			.add(----.join(---------, '.', 'src/icons'))
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]'
			})
	}
}

封装组件

在 src/componemts 目录下，新建 xxx-svg-icon 文件夹，新建 index.vue，输入下面代码

<template>
	<svg :class="svgClass" aria-hidden="true">
		<use :xlink:href="iconName" />
	</svg>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue';
	export default defineComponent({
		name: "xzfx-svg-icon",
		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 lang="scss">
	.xzfx-svg-icon {
		width: 1em;
		height: 1em;
		fill: currentColor;
		overflow: hidden;
	}
</style>

在 main.js 中加入下面代码，扫描 componemts 文件夹下的所有组件，进行全局注册

import { --------- } from "vue";
import --- from "./App.vue";

const --- = createApp(---);

// 导入自定义的组件，全局注册
const --------------- = -------.context('./components', true, /\index.vue$/)
---------------.keys().forEach((item) => {
	-------.log(----)
	---.component(componentsFiles(----).-------.----, componentsFiles(----).-------);
})

---.mount("#app");

svg文件处理

1、在 src 目录下，新建 icons 文件夹，里面新建 svg 文件夹，用于放置所有的 svg 文件。

图标可在 iconfont-阿里巴巴矢量图标库中寻找。

直接下载 svg 图标文件或者复制 svg 代码都可以

2、在 src/icons 目录下，新建 index.js，输入下面代码

const requireAll = requireContext => --------------.keys().map(--------------);
const --- = -------.context('./svg', false, /\.svg$/);
export const ------- = requireAll(---);

3、在 main.js 中引入

import { --------- } from "vue";
import --- from "./App.vue";

// 导入icons
import '@/icons';

const --- = createApp(---);

// 导入自定义的组件
const --------------- = -------.context('./components', true, /\index.vue$/)
---------------.keys().forEach((item) => {
	-------.log(----)
	---.component(componentsFiles(----).-------.----, componentsFiles(----).-------);
})

---.mount("#app");

使用

在任意 .vue 文件中使用即可。

<template>
	<xzfx-svg-icon class-name="icon" icon-class="user" />
</template>

<style scoped lang="scss">
	.icon{
		width: 100px;
		height: 100px;
	}
</style>