ndla-icons

ndla-icons

A package containing icons used in NDLA frontends.

Installation

$ npm install ndla-icons --save

$ yarn add ndla-icons

Usage

import { Audio } from 'ndla-icons/common');
import { Camera } from 'ndla-icons/editor');

const IconList = () => (
  <ul>
    <li><Audio /> Audio icon</li>
    <li><Camera /> Camera icon</li>
  </ul>
)

or

import { Audio } from 'ndla-icons/lib/common/Audio');

<Audio />

Icons are currently grouped into three folders

• common
• license
• editor
• contentType

Development

TLDR: Change/Add/Remove svg file(s). Run node scripts/createIconComponents.js. Commit.

Add new svg file:

• Add svg file to an appropiate folder in ndla-icons/svg.
• Ensure that data-license and data-source attributes are on the <svg> element.
• Run node scripts/createIconComponents.js from root folder.
• Commit changes.

Edit svg file:

• Edit existing svg file.
• Run node scripts/createIconComponents.js from root folder.
• Commit changes.

Delete svg file:

• Delete svg file.
• Run node scripts/createIconComponents.js from root folder.
• Commit changes.

Rename or adding new folders

• Do changes.
• Run node scripts/createIconComponents.js from root folder.
• Update files array in packages.json.