vite-plugin-svg
Extend Vite with ability to use SVG files as Vue components.
Features:
- SVGO optimization
- Hot Module Replacement support
- Default SVG import behavior support
Currently supported Vite version:
1.0.0-rc.4
Install
yarn add --dev vite-plugin-svg npm i -D vite-plugin-svg
Usage
Starting from v0.4.0
to use SVG file as a component, just import VueComponent
from the path of the file.
This gives you more control over how a particular SVG file should be loaded and processed:
// Get URL to SVG file; const img = document;imgsrc = myIconUrl;
<template> <div> <MyIcon /> </div></template><script>import { VueComponent as MyIcon } from './svgs/my-icon.svg'; export default { components: { MyIcon, },};</script>
Setup
vite.config.js
const svgPlugin = ; moduleexports = plugins: ;
TODO:
- Convert plugin to TS
- Support disabling SVGO
- Basic test coverage