I created a workflow to convert the icons to react components in development using svgr
and npm-watch
. For good measure you will probably want to run the icons
script before building for production too.
Install dependencies:
npm install -D @svgr/cli @svgr/plugin-svgo @svgr/plugin-jsx @svgr/plugin-prettier npm-watch npm-run-all
Update package.json
scripts:
{
//...
"scripts": {
//...
// task to convert icons to components
"icons": "npx @svgr/cli --out-dir app/icons -- ./icons",
// watch task
"icons:watch": "npm-watch icons",
// compile once and start watching for changes
"dev:svg": "run-s icons icons:watch",
// remix dev
"dev:remix": "remix dev",
// run all dev: scripts including `dev:svg` (depending on the remix template you might need to replace the default `dev` script)
"dev": "run-p dev:*"
},
// npm-watch configuration
"watch": {
"icons": {
"patterns": [
"icons"
],
"extensions": "svg",
"quiet": false
}
},
//...
}
The svg
icon files are located in the project root in icons/
and the react components are generated in the app/icons/
folder.
svgr.config.js
(optional)
module.exports = {
plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx", "@svgr/plugin-prettier"],
typescript: true, // optional
};
svgo.config.js
module.exports = {
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
},
},
},
],
};