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.
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 https://www.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. 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.
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. Then, run the command to publish to the npm registry.
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.
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.
Packing and Publishing Your Icons
To publish your icons, determine what gets published by adding a files array to package.json. Then, test and publish your package using npm pack and 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. Then, create an index.js entry point for Rollup and bundle your files into a react/index.js file.
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. Then, add unpkg, cdn, and jsdelivr fields in your package.json to point to your sprites.
By following these steps, you can create a JavaScript icon library with npm and publish it to the world.