前言
vite-svg-loader插件可以让我们像使用vue组件那样使用svg图,使用起来超级方便。
安装
npm install vite-svg-loader --save-dev
使用
1、vite.config.ts配置
import svgLoader from 'vite-svg-loader'
export default defineConfig({
plugins: [vue(), svgLoader()]
})
2、vite-env.d.ts里配置。特别注意!
/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />
不配置这个的话,打包会报错
3、组件里使用
记得要在路径后加`?component`,表示像组件一样使用。
可以直接加样式进行修改。
<script setup lang="ts">
import IconMsg from '@/assets/icons/xiaoxi-zhihui.svg?component'
</script>
<template>
<IconMsg class="msg" />
</template>
<style scoped>
.msg {
width: 50px;
height: 50px;
}
</style>