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

``html
add
`

Getting Started

`shell
npm install @mskcc/icons
`

$3

> Add the msk-icon stylesheet to your project.

#### css

`css
@import '@mskcc/icon/dist/msk-icon.min.css';
`

#### scss

`scss
// $msk-icon-font-path is the variable for the font path

@import '@mskcc/icons/dist/msk-icon.scss';
`

#### cdn

`html

href="https://cdn.jsdelivr.net/npm/@mskcc/icons@latest/dist/msk-icon.min.css"
rel="stylesheet"
/>

`

Development Environment

Java is required for icon packaging. Jenv is a utility that makes setting the JAVA_HOME variable easier.

`js
// 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
`

$3

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.

$3

- Add SVG files to src folder
- Run pnpm run build and the files will render in dist

$3

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`