<!-- 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

Keywords

CSS

icon fonts

fonts

FAQs

What is @ritterim/platform-icons?

Is @ritterim/platform-icons well maintained?

Package last updated on 28 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ritterim/platform-icons

Platform Icons

How to use

CDN Usage

NPM Installation

Dev Instructions

SVG Setup for Contributing

Codepoints

Dependencies

Keywords

Related posts

PyPI Expands Trusted Publishing to GitLab Self-Managed as Adoption Passes 25 Percent

Malicious Chrome Extension Exfiltrates Seed Phrases, Enabling Wallet Takeover