Separate package for Platform UI Icons
- 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"/>- 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>- Clone repo
- Navigate into the repo folder
- Run
npm installto 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
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 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.
- 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
- Vite Plugins: