djula VS svgr

In this post, we are going to take a look at how to use SVG content or embed SVGs inside your HTML with the Djula templating engine in a Common Lisp web application.

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.