Skip to content

Instantly share code, notes, and snippets.

@enqtran
Created January 8, 2022 07:00
Show Gist options
  • Save enqtran/3fa35a493b3f78b03fc02d87a58a485f to your computer and use it in GitHub Desktop.
Save enqtran/3fa35a493b3f78b03fc02d87a58a485f to your computer and use it in GitHub Desktop.
1. Install package "@svgr/cli", "@svgr/plugin-jsx"
2. Setup scripts build from svg (npm run svgr)
"svgr": "svgr --config-file .svgrrc.js -d src/assets/icons -- src/assets/icons"
3. Create file .svgrrc.js
module.exports = {
icon: false,
expandProps: true,
replaceAttrValues: { 'none': "currentColor" },
dimensions: true,
ignoreExisting: false,
outDir: "src/assets/icons",
svgoConfig: {},
svgProps: {
'stroke': "currentColor",
'strokeWidth': "0",
'viewBox': "0 0 24 24"
},
jsx: {
babelConfig: {
plugins: [
// For an example, this plugin will remove "id" attribute from "svg" tag
[
'@svgr/babel-plugin-remove-jsx-attribute',
{
elements: ['path'],
attributes: ['fill', 'fillRule', 'clipRule'],
}
],
],
},
}
}
// File .babelrc.js
const plugins = [
[
require.resolve('babel-plugin-module-resolver'),
{
root: ["./src/"],
presets: [
'@svgr/babel-preset'
]
},
]
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment