IDENTITY

Ikona icon font

Icon specs:

1. icons should render sharply at 16x16px
2. icons should be centered in thier artboard, which should be square
3. ideally, icons should exported at 1200x1200px

• this is not currently done with our icons, but will produce better results than exporting at 16x16

Adding an icon

1. run npm install to make sure you have all of the dependencies
2. add your svg file to src/icons; the unicode will be generated by the next step
3. run npm run compile
4. open public/icons.html in your browser, and make sure your icon is there and looks correct
5. commit your changes
6. bump the npm module version (as a patch level change), using 'npm version patch'
7. publish to npm with npm publish. if you have not done so previously, you will need to create an ~/.npmrc file; the contents should be like so:

//registry.npmjs.org/:_authToken=thissecretwillhelpyoupublish
progress=false

8. npm push --tags so the npm version is tagged in github.
9. :+1:

Colors

To use the "mint" color in JS, you would do this:

import { color } from '@codecademy/identity';

console.log(color.mint); // #39D1B4

in SCSS:

.button {
  background-color: $color-mint;
}

Casing

in JS, variable names are camel case so you can use dot-notation

JS: identity.color.lp.chromeBgDark

SCSS: $color-lp-chrome-bg-dark