SVG as Text for React apps
I recently found a small piece of code that migrates from project to project. I decided to generalize it and write an article — might be a helpful one.
Well, to the topic. It is pretty common task to display an icon in React application, and usualy it is a SVG icon. There are several approaches to handling SVG in React —
- load it as a file,
- load it as a sprite,
- CSS data:scheme,
- embed the SVG markup,
- wrap SVG to React component,
- use some (Webpack) loader to make the trick,
- etc.
Technically, these are two different topics: how to manage icons and how to display them, but they are quite closely related.
The proposed approach solves both problems and is very suitable for applications of different scale.
Idea
The core of the approach is using icon mapping and text representation. Look at this:
Yes, this is it. Key-value mapping, where the key is the icon name and the value is the markup.
Then we only need to
- add a typings because I’m using Typescript and it automatically checks for icon
- create the component that wraps the data and provides interface.
Pretty trivial:
More than half of the component is additional functionality: pass callback onClick, apply default values, add special classes. The technically significant part is only ~5 lines of code.
How to manage the icons
It’s easy.
First, the keys are unique. You just cannot add two icons with the same name. Second, there are some TypeScript guard which check the Icon exists in build time:
The other aspect is how to keep the icon names semantic. No problem, with small enhancement you can use not flat naming (like “home” or “settings”) but any nesting you need: “general/settings”, “user/add”, “customer/vip/payment”.
You no longer need to rebuild your sprite or keep track of unused files. A simple global text search will show which keys are being used, and that can be easily automated.
Where to get the icons
Well, it is up to you. I often use https://github.com/FortAwesome/Font-Awesome/tree/master/svgs/regular (FontAwesome).
You need to select an icon, open it source and copy:
Please pay attention to viewBox: as you probably noticed, in the mapping file are stored only the paths, without SVG headers and viewBox. The Icon component adds default value:
and if your icons are from the same origin — or have the same viewBox — that’s it. Otherwise you can use extended syntax of mapping file:
Let’s see it
I’ve created special tine repository which contains the component to demonstrate how to use it: https://github.com/lexey111/react-text-icons
The repository contains React application and the build environment. It created with React, Typescript, ESLint and ESBuild.
The project itself is tiny but fully working “Starter Kit” for ESBuild + TypeScript + React. Feel free to use it as a template, it is blazing fast.
Thank you for attention.
