CLI
SVGR can be run from the CLI. Run it without argument to see the options.
Install
npm install @svgr/cli --save-dev# or use yarnyarn add @svgr/cli --dev
Usage
npx @svgr/cli icons/clock-icon.svg
Recipes
Transform a whole directory
A whole directory can be processed, all SVG files (matching .svg
or .SVG
)
are transformed into React components.
# Usage: npx @svgr/cli [-d out-dir] [--ignore-existing] [src-dir]$ npx @svgr/cli -d icons iconsicons/web/clock-icon.svg -> icons/web/ClockIcon.jsicons/web/wifi-icon.svg -> icons/web/WifiIcon.jsicons/spinner/cog-icon.svg -> icons/spinner/CogIcon.jsicons/spinner/spinner-icon.svg -> icons/spinner/SpinnerIcon.js
Add
--ignore-existing
to avoid overriding existing files.
Use stdin
$ npx @svgr/cli < icons/web/wifi-icon.svg
Use stdin / stdout
$ npx @svgr/cli < icons/web/wifi-icon.svg > icons/web/WifiIcon.js
Transform icons
To create icons, two options are important:
--icon
: viewBox is preserved and SVG inherits text size--replace-attr-values "#000=currentColor"
: "#000" is replaced by "currentColor" and SVG inherits text color
$ npx @svgr/cli --icon --replace-attr-values "#000=currentColor" my-icon.svg
You can replace several values using
,
as separator:--replace-attr-values "#000=currentColor,#fff=currentColor"
Target React Native
It is possible to target React Native using react-native-svg.
$ npx @svgr/cli --native my-icon.svg
Use a specific template
You can use a specific template.
$ npx @svgr/cli --template path/to/template.js my-icon.svg
An example of template:
function template({ template },opts,{ imports, componentName, props, jsx, exports },) {return template.ast`${imports}const ${componentName} = (${props}) => ${jsx}${exports}`}module.exports = template
Template must return a Babel AST, the template function take three arguments:
api
: API methods provided by Babelopts
: SVGR optionsvalues
: Pre-computed values to use (or not) in your templates