Vite-plugin-svg-transform-script NPM

vite-plugin-svg-transform-script

Vite based SVG information reading plug-in can read iconfont's SVG icon file. It can specify input directory, output directory Output the file name to generate a JS script file containing SVG information. Then you can use them to generate SVG icons.

install

npm i vite-plugin-svg-transform-script

use

1.Put static SVG resource file

You can directly save your SVG file into the assets / icon Folder, Of course, you can also store it in other places, just make the corresponding folder path the most parameter Just pass it on.

2.Write parameter configuration

import {transformScript} from "vite-plugin-svg-transform-script";
export default defineConfig({
  plugins: [
    transformScript({
     input:'../assets/icon/',
     output:'../dist/',
     name:'svg-dict',
     type:'js',
     format:'export'
    })
    ]
  })

3.Restart your vite project

After you have finished configuring, restart the vite project, and the plug-in will automatically read the SVG file under the input path you specified, and generate the SVG file in the output directory you specified Script file of SVG information

// svg-dict.js
export const content1 = <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN".............. '
export const content2 = <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN".............. '

Api

Method name	explain	parameter	return value
transformScript	Generate a script file based on the passed in configuration parameters	ISvgTransScriptOption	void
findSvgFile	Search SVG files in the specified folder according to the incoming parameters	dir:String Svg file path	Array<{name:String,svg:String}>fileName：Humped SVG file namesvg:InnerHTML corresponding to SVG file
createFile	Generate SVG script of specified directory according to the passed in parameters	outputPath:String Specified output pathfileName:String Specified output file name svgData:Array<{name:String,svg:String} Return value of 'findSvgFile' method	void
loadsvg	Insert the SVG element to the top of the body	`svg-dict` object generated in default format	void

Interface

ISvgTransScriptOption

key	explain	default value	required
input	Enter the path to your SVG file	-	true
output	Output path, specifying the generated file path	path.resolve()	false
name	Specifies the name of the build file	'svg-dict'	false
type	Specify the type of generated file. Please pass in 'ts' or' js'	'ts'	false
format	Specify the export format. Please enter 'export' or 'default'	'default'	false