@mskcc/icons NPM

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.