cl-svg-demo VS svgr

The source code for cl-djula-svg is hosted in Github and the demo project is here

Really interesting framework agnostic approach, but I think SVGR is a better option for my React homies. It imports an SVG file as a React component. Shouts also to react-icons if Font Awesome, Material Icons and friends are more your bag.

SVGR

There is another way to import an SVG in Create React App, though. We can import the SVG as a ReactComponent. This is because CRA leverages SVGR to process SVGs.

const { types } = require('@babel/core'); module.exports = { ... template: function svgrCustomTemplate( { imports, interfaces, componentName, props, jsx, exports }, { tpl } ) { // меняем корневой элемент на SvgIcon jsx.openingElement.name.name = 'SvgIcon'; jsx.closingElement.name.name = 'SvgIcon'; // https://github.com/gregberge/svgr/issues/530 // при изменении корневого элемента пропадает спред пропсов // поэтому необходимо добавить спред пропсов самостоятельно jsx.openingElement.attributes.push( types.jSXSpreadAttribute(types.identifier('props')) ); return tpl` ${imports}; import { SvgIcon } from '../SvgIcon'; ${interfaces}; const ${componentName} = (${props}) => ( ${jsx} ); ${exports}; ` } }

To solve these problems and have a better development workflow, I have created a package called cl-djula-svg which automates all the above steps for you. The inspiration for this package came from svgr which exactly does the same thing in React applications. It takes a SVG file, process some override logic, optimize it and create React wrapper components based on the SVG content.

I normally use SVGR but every time a designer sends me an svg i’ll pass it in svgOmg that deletes all the unnecessary attributes and propietary code from figma, illustrator &co.

https://github.com/gregberge/svgr/issues/362 this may help as well.

If you're using Webpack, CRA, or Next.js, you should be using SVGR.