0.1.8 • Published 2 years ago
sfdc-ns-ui-components-icons v0.1.8
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
- Get a list of files in the
svgs
directory - For each SVG file, sanitize the markup by stripping out any non-path tags.
- For each SVG file, generate React Component code containing the sanitized markup.
- Write each React Component to a
.tsx
file inbuild/components/
- Generate
index.ts
andindex.d.ts
files that import and export each React Component - Use the Typescript CLI (
tsc
) to transpile all.tsx
files to browser-friendly.js
files inbuild/package
Modules
src/templates.js
- String interpolation templates for generating.tsx
and.svg
filessrc/svg.js
- Helper methods for extracting data from SVG files, like paths & viewBoxsrc/files.js
- Scans the file system for SVG files and writes.tsx
files tobuild/components/