• Making SVG Icon Libraries for React Apps
  • Originally written by Nicolas
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: AlbertHao
  • Proofreader: AlenQi, 94haox

Create an SVG icon library for your React app

Using SVG is by far the best way to create an icon library for your application. ICONS made in SVG are scalable and adjustable, as well as discrete, which means they can be incrementally loaded or updated. In contrast, ICONS built with fonts cannot be incrementally loaded/updated. This alone makes SVG ICONS a better choice for high-performance applications that rely on code separation and incremental deployment.

This article describes how to create a package made up of React components from an SVG icon library. While I’ll focus on the React framework, the same is true for any other type of package. In my Twitter project, I used several of the different ways to package the company’s in-house SVG icon library, including optimized SVG, pure JavaScript modules, the React Dom component, and the React Native component.

Use the ICONS

The end result is a JavaScript package that can be installed and used just like any other JavaScript package.

yarnpkg add @acme/react-icons
Copy the code

Each icon can be considered a usable, independently exported React component.

import IconCamera from '@acme/react-icons/camera';
Copy the code

This line of code allows your module packaging tool to pack only the ICONS it needs. When using code splitting, ICONS can be efficiently separated by blocks. This is a major advantage over icon libraries that introduce fonts and pack all ICONS into a single component.

// The entire Icon library is packaged into your application import Icon from'@acme/react-icons';
const IconCamera = <Icon name='camera'/ >;Copy the code

Each icon can be easily customized for use (for example, color, size, etc.).

import IconCamera from '@twitter/react-icons/camera';
const Icon = (
  <IconCamera
    style={{ color: 'white', height: '2em' }}
  />
);
Copy the code

However, ICONS are ultimately rendered in SVG, an implementation detail that is not known to component users.

Create components

Each React component renders an inline SVG image using path and dimension data extracted from the SVG source file. Using the createIconComponent helper function, we can create a component from the SVG data with just a few lines of template code.

import createIconComponent from './utils/createIconComponent';
import React from 'react';
const IconCamera = createIconComponent({
  content: <g><path d='... '></g>,
  height: 24,
  width: 24
});
IconCamera.displayName = 'IconCamera';
export default IconCamera;
Copy the code

This is an example of building a Web application like Twitter Lite using the createIconComponent function.

// createIconComponent.js
import { createElement, StyleSheet } from 'react-native-web';
import React from 'react'; const createIconComponent = ({ content, height, width }) => (initialProps) => { const props = { ... initialProps, style: StyleSheet.compose(styles.root, initialProps.style), viewBox: `0 0${width} ${height}`};return createElement('svg', props, content);
  };

const styles = StyleSheet.create({
  root: {
    display: 'inline-block',
    fill: 'currentcolor',
    height: '1.25 em',
    maxWidth: '100%',
    position: 'relative',
    userSelect: 'none',
    textAlignVertical: 'text-bottom'}});Copy the code

Setting the style fill to currentColor allows you to control the color of SVG through the Color style property.

Now all we need to do is use the script to process the SVG and generate the React component.

Create icon pack

You can find complete sample code for one of the ways this works on GitHub in a repository called Icon-Builder-Example.

The project structure of the entire sample tool looks something like this:

.├ ── Download.exe ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ SVG Exercises ── Camera. SVG Exercises ──...Copy the code

The build script uses SVGO to optimize SVG and extract SVG path information and metadata. The React packaging tool in the following example uses templates to create package.json files and the React ICONS that need to be displayed on the first screen.

import createIconComponent from './utils/createIconComponent';
import React from 'react';
const ${componentName} = createIconComponent({
  height: ${height},
  width: ${width},
  content: <g>${paths}</g>
});
${componentName}.displayName = '${componentName}';
export default ${componentName};
Copy the code

Additional packaging tools can also be introduced to compile other types of packages from the same SVG source. When the underlying icon library changes, hundreds of ICONS can be recompiled and new versions released for each package with just a few commands.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.