@nrk/core-icons

@nrk/core-icons

Icon and logo kit providing a consistent and predictable user experience across platforms and NRK services

Documentation

https://static.nrk.no/core-icons/latest/

Installation

Download the Sketch library for sketching, individual SVGs for Android, PDFs for iOS. All icons follow BEM naming conventions and are prefixed with nrk- to play nice with existing code.

Using NPM

npm install @nrk/core-icons

All icons are exposed individually as exported constants (enabling tree shaking):

import { nrkLogoNrk } from '@nrk/core-icons'      // Vanilla JS, String
import { NrkLogoNrk } from '@nrk/core-icons/jsx'  // React, ReactElement

<NrkLogoNrk />                                    // Example render a NRK logo with React
<span style={{ color: 'red', fontSize: 20 }}>     // Style is inherited from parent element
  <NrkLogoNrk />
</span>

Using static

Recommended only for prototyping.

<script async src="https://static.nrk.no/core-icons/major/11/core-icons.min.js"></script>

Local development

First clone @nrk/core-icons and install its dependencies:

git clone [e-mail]:nrkno/core-icons.git
cd core-icons
npm install
npm start # Your browser will open documentation with hot reloading

Building and committing

After having applied changes, remember to build before pushing the changes upstream.

git checkout -b feature/my-changes
# update the source code
npm run build
git commit -am "Add my changes"
git push origin feature/my-changes
# then make a PR to the master branch,
# and assign another developer to review your code

NOTE! Please also make sure to keep commits small and clean (that the commit message actually refers to the updated files).
Stylistically, make sure the commit message is Capitalized and starts with a verb in the present tense (for example Add minification support).