React Icon System

React Icon System

varun.ca varun.ca3 weeks ago in #Web Design Love34

10th June, 2020 Icons play a crucial role in interface design. They can certainly be used as visual embellishments, but they are quite often able to convey their meaning without additional text, making them a handy tool for designers & developers. There are many different ways to build icon systems. In the past, I have written about a sprite based technique. Since then, tooling has matured and there are better approaches. This article will show you how to set up an icon system using SVGR — a tool for transforming SVGs into React components. Prepare the SVG Files Our starting point will be SVG files – one per icon. You will likely use design tools like Figma, Illustrator or Sketch to create these. When designing these icons, consider using a consistent artboard size. This ensures that all icons follow the same layout rules and can be used interchangeably. You should also consider adding a bit of padding to your artboard to keep the icon content visually centred. Artboard size, live area and padding Generating the Icon Components SVGR converts SVG files into React components. It is available as a Node library, a CLI tool and a webpack plugin. Create React App comes pre-configured with SVGR. You can import an SVG file and use it as a component. This is a great start. It reduces the effort required to use SVGs with React. import { ReactComponent as Logo } from ‘./logo.svg’; function App() { return ( {} ); } By using the SVGR CLI, you can customize the component generation and improve your workflow further. You can provide a custom template for component generation and even transform the SVG itself. To start, install the CLI using: $ npm install @svgr/cli –save-dev To create an icon, run: $ npx svgr –icon –replace-attr-values “#000=currentColor” my-icon.svg Notice, the –icon flag. It performs a couple of important tasks for us: It sets the width and height values to 1em to make the SVG scale with the inherited font-size. It preserves viewBox to ensure that the SVG scales with the correct aspect ratio. The –replace-attr-values “#000=currentColor” flag replaces the chosen color with currentColor, allowing you to control the icon color using the font-color CSS property. Behind the scenes, SVGR also uses SVGO to optimize the SVG file before converting it into a component. This is a sample of what you can expect the output to look like: MyIcon.js import * as React from ‘react’; function SvgMyIcon(props) { return ( ); } export default SvgMyIcon; To transform an entire directory of icons, use: $ npx svgr –icon –replace-attr-values “#000=currentColor” -d icons icons I generally treat these generated icon components as build artifacts. All the SVG files live in an icon directory, and the .js files within that directory are ignored by git. Then use an npm task to generate the icon components at build time. package.json { … “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “prebuild”: “npm run icons”, “test”: “react-scripts test”, “eject”: “react-scripts eject” “icons”: “svgr –icon –replace-attr-values ‘#000=currentColor’ -d src/icons src/icons” } } Customizing the Icon Component You can provide a custom template to modify the generated component code. The template below creates an icon component that leverages styled-components to control its styling. icon-template.js function template( { template },  » Read More

Like to keep reading?

This article first appeared on varun.ca. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply