Create a JavaScript Icon Library with Node Package Manager

Getting Started

To create a JavaScript icon library using Node Package Manager (npm), you’ll need a few essential tools. First, make sure you have Node v14 installed, along with an npm account and a Figma account. Create a directory for your package on the command line, specifying your package name.

mkdir my-icon-library
cd my-icon-library

Choosing a Name and License

Finding the right name for your package is crucial, as names can only be used once. Use the npm name checker or visit undefined.npmjs.com/package/ to see if your desired name is available. Once you’ve chosen a name, select a license for your package from Choose a License.

Setting Up Git and GitHub

Initialize a new Git repository in your package directory and create a README.md file with a short description.

git init
echo "# My Icon Library" > README.md

Then, visit https://github.new to create a repository. Before adding a remote or pushing any changes, modify your package.json by adding repository, bugs, and homepage properties.

{
  "name": "my-icon-library",
  "repository": {
    "type": "git",
    "url": "undefined.com/my-username/my-icon-library.git"
  },
  "bugs": {
    "url": "undefined.com/my-username/my-icon-library/issues"
  },
  "homepage": "https://github.com/my-username/my-icon-library#readme"
}

Publishing Early to npm

Publishing early to npm protects you from getting your package name taken by others. Create an account and authenticate yourself on the command line.

npm adduser
npm login

Then, run the command to publish to the npm registry.

npm publish

Creating Icons

When creating an icon set or library, make assumptions to allow for better optimization. Use strokes for outline icons and fills for solid ones. Solid icons are used when recognizability is crucial, while strokes are well-suited for creating tiny details.

Using Figma as a Design Tool

Figma is a powerful design tool that allows you to export icons programmatically. Create Figma components from your icons and separate them into outline and solid pages. Then, use the figma-export package suite to export your icons from Figma automatically.

npx figma-export --config figma.config.js

Optimizing Icons

Optimize your icons using svgo, which optimizes SVGs based on a set of plugins. Remove dimensions, attributes, and add currentColor values to make your icons more versatile.

npx svgo --config svgo.config.js

Packing and Publishing Your Icons

To publish your icons, determine what gets published by adding a files array to package.json.

{
  "files": ["dist/**/*"]
}

Then, test and publish your package using npm pack and np.

npm pack
np

Using SVGs as React Components

Transform your SVGs into React components using svgr. Add an additional value to your outputters array in figma.config.js and generate tsx files.

module.exports = {
  //...
  outputters: [
    {
      type: 'tsx',
      filePath: 'rc/icons/[name].tsx'
    }
  ]
};

Then, create an index.js entry point for Rollup and bundle your files into a react/index.js file.

import { rollup } from 'rollup';
import { babel } from 'rollup-plugin-babel';

export default {
  input: 'rc/index.js',
  output: {
    file: 'dist/react/index.js',
    format: 'cjs'
  },
  plugins: [babel()]
};

Using Sprites and CDNs

Export sprites for your SVGs and make them readily available through package CDNs. Add a sprite directory to your outputters array and point to a sprite directory.

module.exports = {
  //...
  outputters: [
    {
      type: 'prite',
      filePath: 'dist/sprites/[name].svg'
    }
  ]
};

Then, add unpkg, cdn, and jsdelivr fields in your package.json to point to your sprites.

{
  "unpkg": "https://unpkg.com/my-icon-library@1.0.0/dist/sprites/",
  "cdn": "https://cdn.jsdelivr.net/npm/my-icon-library@1.0.0/dist/sprites/",
  "jsdelivr": "https://cdn.jsdelivr.net/npm/my-icon-library@1.0.0/dist/sprites/"
}