DSS Icons @ Design System Starter Template

@ds-starter/icons is the part of the Design System Starter (DSS) Template
The package is created for demo purposes and is not intended for production usage
See it in action:

• DSS Storybook
• DSS Documentation
• Example App

Overview

Icons is an optional package and naturally is the dependency for @ds-starter/ui.

Installation

npm i @ds-starter/icons

Usage

Icon components

import { IconArrowLeft } from '@ds-starter/icons';

// ...
<div>
  <IconArrowLeft />
</div>

When tree-shaking is supported you can benefit from dedicated import:

import IconArrowLeft from '@ds-starter/icons/lib/IconArrowLeft';

SVG import

Depending on the project settings SVG import can work differently.
In basic cases result of import would be the image src:

import arrowRightSrc from '@ds-starter/icons/svg/arrow-right.svg';

// ...

<figure>
  <img src={arrowRightSrc} alt="" />
</figure>

Managing icons

It's all set up for maximum DX (Developer Experience). The process of adding an icon is straightforward.
Place an SVG file in /svg folder and build the project.

pnpm build

That's it!

Two processes happen during this process.
First - generation script is processing SVG files and generates new Icon components.
Then - build process takes care of bundling and typings.

Generation is based on SVGR, that you can refer to further documentation and examples.

Note that local commands don't consider workspace dependencies - make sure to build everything in advance.
Alternatively, use global turbo commands (i.e. turbo dev).
Explore turbo docs for more information.

References

• Icons package is using Tabler Icons for demo purposes
• Components are generated with React SVGR
• Build is powered by tsup