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 |
- 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>
npm install @mskcc/icons
Add the
msk-icon
stylesheet to your project.
@import '@mskcc/icon/dist/msk-icon.min.css';
// $msk-icon-font-path is the variable for the font path
@import '@mskcc/icons/dist/msk-icon.scss';
<head>
<link
href="https://cdn.jsdelivr.net/npm/@mskcc/icons@latest/dist/msk-icon.min.css"
rel="stylesheet"
/>
</head>
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
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.
- Add SVG files to
src
folder - Run
pnpm run build
and the files will render indist
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