Create your own React icons library and publish to npm automatically

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • heroicons

    A set of free MIT-licensed high-quality SVG icons for UI development.

    Fact: I’ve learnt this from watching tailwindlabs/heroicons.

  • svgo

    ⚙️ Node.js tool for optimizing SVG files

    We will use svgo to optimize our SVG icon files since:

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • react-icon-boilerplate

    The boilerplate of creating React SVG icons library

    This is my optimized result file.

  • semver

    Semantic Versioning Specification

    For the first release, you have to run yarn changeset. It will ask what kind of Semantic Versioning you want to bump your package and write a short summary about it. It will create something like this and you now can commit this file to your repository.

  • changesets

    🦋 A way to manage your versioning and changelogs with a focus on monorepos

    When you have the final dist folder as the result now you can publish this to npm. It can be easily done by login into the npm account via NPM CLI npm login and run the npm publish --access public after that. But I want to leverage GitHub Actions and atlassian/changesets to do this automatically for me.

  • action

    changesets has a very detailed instruction to implement their action into your GitHub workflows here https://github.com/changesets/action Or you can get my release.yml here release.yml.

  • svgr

    Transform SVGs into React components 🦁

    We need some packages in order to transform our SVG files into React SVG components and then convert JSX syntax into CJS and ESM module format. We use babel and svgr.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • svgomg

    Web GUI for SVGO

    Before come up with these plugins, I tried to mess around on this website SVGOMG - SVGO’s Missing GUI

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    We need some packages in order to transform our SVG files into React SVG components and then convert JSX syntax into CJS and ESM module format. We use babel and svgr.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts