@ndla/icons

@ndla/icons

A package containing icons used in NDLA frontends.

Installation

yarn add @ndla/icons

npm install @ndla/icons --save

Usage

import { VoiceprintLine, CameraFill } from "@ndla/icons";

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

Icons are currently grouped into four folders

• common
• license
• editor
• contentType

Development

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

Add new svg file:

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

Edit svg file:

• Edit existing svg file.
• Run node scripts/createTsIconComponents.mjs from root folder.
• Commit changes.

Delete svg file:

• Delete svg file.
• Run node scripts/createTsIconComponents.mjs from root folder.
• Commit changes.

Rename or add new folders

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