Vue3(基于ts)操作svg图片

一、 安装 svg-sprite-loader

  npm install svg-sprite-loader

二、自定义SvgIcon 组件

<template>
	<svg
		class="svg-icon"
		:style="{
			width: props.size + 'px',
			height: (props.height || props.size) + 'px',
			color: props.color,
		}"
	>
		<use :xlink:href="`#icon-${props.name}`" :fill="props.color" />
	</svg>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue'
const props = withDefaults(
	defineProps<{
		size: number
		height: number
		color: string
		name: string
	}>(),
	{
		color: '#000',
	}
)
</script>

三、在vue.config.js 中配置

	chainWebpack: (config) => {
		//#region 配置 svg组件加载start
		const svgRule = config.module.rule('svg') // 找到svg-loader
		//清除已有的loader，不这样做会添加到此loader之后，svg-sprite-loader不会生效
		svgRule.uses.clear()
		// 正则匹配排除node_modules目录
		svgRule.exclude.add(/node_modules/) 
		svgRule
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]',
			})
			.end()
		//#endregion
	},

四、在main.ts 中配置

import SvgIcon from "./components/SvgIcon.vue"
const app=createApp(App);
//注册全局组件
app.component('svg-icon',SvgIcon)
const requireAll = (requireContext:any)=> requireContext.keys().map(requireContext)

const req = require.context('./assets/svg', false, /\.svg$/)
requireAll(req)

app.use(router)
app.mount('#app')

五 调用

<svg-icon name="jsc-header-leftarrow" :size="24"></svg-icon>