@mskcc/icons
v2.7.2
Published
MSK icons and icon font
Downloads
1,057
Keywords
Readme
MSK Icons
Font files built with ligatures and Icon SVG sources
| | |
| ---------------------- | -------------------------- |
| dist/svg/* | SVG files |
| dist/msk-icon.min.css | css stylesheet |
| dist/msk-icon.scss | scss stylesheet |
| $msk--icon-font-path
| variable for the font path |
Usage
- Use the class
msk-icon
in a span element to point to the font - The text inside the span will point to the correct icon
<span class="msk-icon">add</span>
Getting Started
npm install @mskcc/icons
Add icon stylesheet in your project
Add the
msk-icon
stylesheet to your project.
css
@import '@mskcc/icon/dist/msk-icon.min.css';
scss
// $msk-icon-font-path is the variable for the font path
@import '@mskcc/icons/dist/msk-icon.scss';
cdn
<head>
<link
href="https://cdn.jsdelivr.net/npm/@mskcc/icons@latest/dist/msk-icon.min.css"
rel="stylesheet"
/>
</head>
Development Environment
Java is required for icon packaging. Jenv is a utility that makes setting the JAVA_HOME
variable easier.
// After running each script, please follow the directions they provide
brew install maven jenv openjdk@11
jenv init -
// Run below within icons directory
mvn install
mvn package
gulp build
Codepoints
Each icon font has a reserved codepoints index that points to a unicode set, which is identified in reserved-codepoints.json
. As a new icon gets added, we will assign the next available codepoints index.
Adding new icons to the font file
- Add SVG files to
src
folder - Run
pnpm run build
and the files will render indist
Reserving Codepoints
This task solidifies the space for the specified icon.
- Run
pnpm run build:codepoints
to add the new icon codepoints index to the reserve list. - Commit the changes to
reserved-codepoints.json