NS Icon Library

A collection of general-purpose icons packaged as React Components with embedded SVG.

Usage

Install the package

npm install --save @narrativescience/icons

Import and use an icon

import { SomeIcon } from '@narrativescience/icons'

const MyComponent = () => (
  <div>
    <SomeIcon />
  </div>
)

Add a new icon

1. Add a new .svg file to the /svgs directory

Make sure its filename matches the desired component name, and that it follows PascalCase naming conventions.

git checkout -b feature/MyNewIcon
git add svgs/MyNewIcon.svg

2. Bump the package version and create a PR

npm version patch
git commit -a -m "Adds MyNewIcon"
git push origin feature/MyNewIcon

3. Add a git tag

Once the PR is merged, create a tag on main and push it.

Make sure the tag is formatted like icons-v0.0.0 and that the version matches package.json

git checkout main
git pull
git tag icons-v0.1.0
git push origin icons-v0.1.0

Once pushed, CircleCI will automatically build & publish a new version of the NPM package. Your new icon will be available to consuming applications.

Manually build NPM package

npm run build

This will produce a local NPM package in build/package that is npm link-able.

Implementation Details

Build sequence

1. Get a list of files in the svgs directory
2. For each SVG file, sanitize the markup by stripping out any non-path tags.
3. For each SVG file, generate React Component code containing the sanitized markup.
4. Write each React Component to a .tsx file in build/components/
5. Generate index.ts and index.d.ts files that import and export each React Component
6. Use the Typescript CLI (tsc) to transpile all .tsx files to browser-friendly .js files in build/package

Modules

• src/templates.js - String interpolation templates for generating .tsx and .svg files
• src/svg.js - Helper methods for extracting data from SVG files, like paths & viewBox
• src/files.js - Scans the file system for SVG files and writes .tsx files to build/components/