@ritterim/platform-icons NPM

Platform Icons

Separate package for Platform UI Icons

How to use

CDN Usage

In your projects <head> section, include one of the following lines:

<!-- UNPKG -->
<link rel="stylesheet" href="https://unpkg.com/@ritterim/platform-icons/dist/platform-icons.css"/>

<!-- JSDELIVR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ritterim/platform-icons/dist/platform-icons.css"/>

<!-- Skypack -->
<link rel="stylesheet" href="https://cdn.skypack.dev/@ritterim/platform-icons/dist/platform-icons.css"/>

NPM Installation

In your project, install the Platform Icons package via npm

npm install @ritterim/platform-icons

Include in your HTML or import into your stylesheet

<!-- index.html -->
<link rel="stylesheet" href="path/to/node_modules/@ritterim/platform-icons/dist/platform-icons.css"/>

/* style.css */
import 'path/to/node_modules/@ritterim/platform-icons/dist/platform-icons.css'

Use icons in your HTML:

<i class="pi-check"></i>

Dev Instructions

Clone repo
Navigate into the repo folder
Run npm install to install dependencies
After installing dependencies, build the project by running npm run build
To start dev server, run npm start
To create package, run npm run pack

SVG Setup for Contributing

Some notes on svg setup

source	default
artboard	4" x 4"
main stroke	24pt
auxiliary stroke	18pt
corner	.15"
join	round

Use compound paths (remember, there is no white 😜)
Expand to outlines

Codepoints

Codepoints are the hexadecimal pointer to an icon. Here, they're used to target icons in CSS using :before:

<i class="pi-platfrom-ui"></i>

<style>
  .pi-platform-ui:before {
    content: "\f18f";
  }
</style>

Each time the icon set is generated there's a chance these pointers may shift. To avoid this, we copy ./public/platform-icons.json map to reserved-codepoints.json to maintain the current label-to-codepoint map so codepoints don't change.

Dependencies

SVGO - used to optimize all SVG icons
Fantasticon - used to build icon fonts
Vite - used for dev server and building library
- Vite Plugins:
  - vite-plugin-banner - used to prepend licensing info
  - rollup-plugin-copy - used to copy generated font files to the public directory
  - vite-plugin-handlebars- used to run the handlebars templates