@unifyux/icons

As of 2.1.0, only Revvity custom icons are supported. The focus of this library is industry and product specific icons. For common application icons use Material Symbols and Icons. Additional documentation is available here.

Usage

Standard icons are available in a variety of formats:

• React components
• Icon font
• SVG files
• ES2015 Module
• CommonJS Module
• UMD Module

React Components

Standard import:

import <icon name in PascalCase format> from @unifyux/react;
<!-- example -->
import Revvity from @unifyux/react;

SVG props, accessibility, and React memo are supported.

Icon Font

Reference is here

Add the font to your project:

import revvicons from @unifyux/font/revvicons.css;

Usage:

<i class="icon icon-<icon-name-in-snake-case>"></i>
<!-- example -->
<i class="icon icon-revvity"></i>

This library is generated using (fantasticon)[https://github.com/tancredi/fantasticon]. From their documentation: "It also generates TypeScript types, JSON maps of the generated code-points, allowing for a great deal of different usages, e.g. integrating with React type-safe icon components or integration on mobile apps by just combining TTF and JSON generation."

@unifyux/font/revvicons.ts and @unifyux/font/revvicons.json

SVG files

Raw image format in SVG:

import @unifyux/icons/svg/{icon-name-in-snake-case}.svg
<!-- example -->
import @unifyux/icons/svg/revvity.svg

New icons

Requests can be submitted here.

Development & other build types

Adding a new SVG Icon

Add the SVG file into src/svg directory.

yarn run build:svg optimizes the SVG files in src/svg and places the resulting files in dist/svg.

React components

yarn run build:react takes the cleaned SVGs from above and

Icon font build

yarn run build:font builds the icon font and artifacts (css, json, font files etc) yarn run preview builds and provides a browser preview of the icon font

JS Module Build

yarn run build:js builds the src/main.js ES6 module and places the resulting modules in dist. These are the output modules:

• dist/revvicons.cjs.js A CommonJS bundle, suitable for use in Node.js, that requires the external dependency. This corresponds to the "main" field in package.json
• dist/revvicons.esm.js an ES module bundle, suitable for use in other people's libraries and applications, that imports the SVG icons. This corresponds to the "module" field in package.json
• dist/revvicons.umd.js a UMD build, suitable for use in any environment (including the browser, as a <script> tag), that includes the external dependency. This corresponds to the "browser" field in package.json

Combined Build

yarn run build builds all of the target formats, after cleaning the dist dir.

Dev Build

yarn run dev builds the library, then keeps rebuilding it whenever the source files change using rollup-watch.

Releases

2.1.1

• React components support
• Upgrade of font generator
• Improvements to SVGO output
• Consistency in API for legacy build types
• New icons
  • Revvity
  • Unify
  • ChemCollections

2.1.0

• reboot to revvicons

License

MIT.