vite-svg-loader，在项目里轻松使用svg，ts项目需特别注意！

前言

 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>