Vite Plugin SVG Inline
What it does
Replaces tags referencing your SVG files, with the optimized inlined contents of the SVG. Set the folder your SVGs can be found in, select the tag type and attribute for the svg file url, and the plugin will do the rest.
Keep your HTML clean by only needing to use <icon src="mysvg.svg">
instead of pasting the entire contents into your project.
Uses svgo to optimize your SVGs.
Usage
Import viteInlineSVG
from @kingkongdevs/vite-plugin-svg-inline
import viteInlineSVG from @kingkongdevs/vite-plugin-svg-inline'
Add the viteInlineSVG to your vite.config.js
file's plugins array:
plugins: [
viteInlineSVG({
cwd: 'src/assets/images',
tag: 'icon',
attr: 'src'
})
]
Plugin Options
cwd
-
Type:string
-
The directory where your svg files can be found. Default:'src/assets/images'
tag
-
Type:string
-
The tag type you would like to use in your HTML to refer to an SVG. Default:'icon'
attr
-
Type:string
-
The attribute that contains your svg filename. Default:'src'
svgo
-
Type:object
-
Default:
{
plugins: [
"removeDimensions",
"removeXMLNS"
]
}
The svgo options you would like to use.
Examples
HTML:
<icon src="icon-play.svg" class="img-fluid view-animation"></icon>
Output:
<svg viewBox="0 0 183 183" fill="none" class="img-fluid view-animation animated"><circle opacity="0.2" cx="91.6048" cy="91.2669" r="91.0989" fill="#4AC186"></circle><circle cx="91.6051" cy="91.2662" r="62.1129" fill="#4AC186"></circle><path d="M112.311 92.302L81.2541 110.232L81.2541 74.3715L112.311 92.302Z" fill="white"></path></svg>