Create your own React icons library and publish to npm automatically

• heroicons

  29 17,742 3.9 JavaScript

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

  

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

• svgo

  11 18,813 8.3 JavaScript

  ⚙️ Node.js tool for optimizing SVG files

  

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

• Appwrite

  appwrite.io

  sponsored

  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

  0 4 3.7 JavaScript

  The boilerplate of creating React SVG icons library

  This is my optimized result file.

• semver

  305 6,469 5.8

  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

  14 5,204 8.2 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

  1 334 5.3 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

  15 9,327 8.3 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.

• Sonar

  www.sonarsource.com

  sponsored

  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

  49 5,237 0.0 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

  65 3,250 0.0 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