Publishing Icons As React Packages

Preparation for packages

To prepare your icons for package there are few steps, we will go through it.

1. HD image (vector), and make sure not to large

This part is common, as we know storing png/jpg or any raster formats media as icons is not a good practice since it size is bigger and consume time. (can read further here and decides: https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg).

ref: image sample from Adobe Photoshop (pixel based) vs Adobe Illustrator (vector based) edits

2. Initiate your package

You have to at least have the requirements ready. If this is your first time building package, just follow steps below..

mkdir neo-icons && cd neo-icons && yarn init -y && yarn add -D @types/node @types/react @types/react-dom babel-core babel-runtime react react-dom typescript rollup rollup-plugin-sass rollup-plugin-typescript2
its just xml syntax .. 😎😎
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["src"],
"exclude": ["node_modules", "dist", "example", "rollup.config.js"]
}
import sass from 'rollup-plugin-sass'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
export default {
input: 'src/index.tsx',
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true,
strict: false
}
],
plugins: [
sass({ insert: true }),
typescript({ objectHashIgnoreUnknownHack: true })
],
external: ['react', 'react-dom']
}
# edit this line to point to our dist folder which will be generated after build
"main": "dist/index.js",
# add this
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"files": [
"dist"
],

Testing package

create a simple react app as per the docs on reactjs website above, or can follow below.

npx create-react-app my-app
You can now run `yarn link "neo-icons"` in the projects where you want to use this package and it will be used instead.
# add after other imports
import { CarIcon } from 'neo-icons';
# add our CarIcon as component in any place we like, ideally just replace the original icons of react that keeps spinning :D
<CarIcon />
our icon should also spin the same way as we inherit the same props

Publishing our package

Thats it!! now go our package folder and review the package.json for our package, make sure to see the name and version appropriately to your actions. Run:

yarn publish

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store