Create your own React icons library and publish to npm automatically

• heroicons

  78 20,637 7.2 JavaScript

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

  

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

• svgo

  29 20,349 9.0 JavaScript

  ⚙️ Node.js tool for optimizing SVG files

  

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

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-icon-boilerplate

  1 4 3.7 JavaScript

  Discontinued The boilerplate of creating React SVG icons library

This is my optimized result file.

• semver

  720 7,020 2.3

  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

  30 7,998 5.7 TypeScript

  🦋 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

  4 577 5.5 TypeScript
  

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

  30 10,294 6.1 TypeScript

  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.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• svgomg

  77 5,649 5.9 JavaScript

  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

  145 3,256 1.5 JavaScript

  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.

Suggest a related project