English | 简体中文
vite-plugin-vue-svg-reactive-loader
Vite 2.x plugin, loads SVG files as Vue components, and automatically adds the viewBox
attribute to the svg, so that the svg can be adaptively zoomed.
<template>
<MyIcon class="my-icon"/>
</template>
<script setup>
import MyIcon from './my-icon.svg'
</script>
<style scoped>
.my-icon {
height: 14px;
width: 14px;
fill: aqua;
}
</style>
Install
npm install vite-plugin-vue-svg-reactive-loader --save-dev
Setup
vite.config.js
import svgReactiveLoader from "vite-plugin-vue-svg-reactive-loader"
export default {
plugins: [vue(), svgReactiveLoader()],
}
Use with TypeScript
If you use the loader in a Typescript project, you might get warnings like Type 'string' is not assignable to type 'Component'
.
To fix this you'll need to add the following type definitions to your compiler options:
tsconfig.json
{
"compilerOptions": {
"types": ["vite-plugin-vue-svg-reactive-loader",, "vite/client"]
}
}