Remix

Configure your Remix project to import SVG as React components in your application.

Install

npm install --save-dev @svgr/cli @svgr/plugin-svgo @svgr/plugin-jsx @svgr/plugin-prettier npm-watch npm-run-all

Usage

Using SVGR into Remix is possible by configuring package.json scripts.

package.json

{
//...
"scripts": {
//...
// task to convert icons to components
// you may change the input and output directories
"icons": "npx @svgr/cli --out-dir app/components/icons -- app/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`
"dev": "run-p dev:*"
},
// npm-watch configuration
"watch": {
"icons": {
"patterns": [
"icons"
],
"extensions": "svg",
"quiet": false
}
},
//...
}

svgr.config.js

module.exports = {
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
typescript: true,
}

svgo.config.js

module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
}

Your code

import Star from '~/icons/star.svg'
const Example = () => (
<div>
<Star />
</div>
)
Edit this page on GitHub