@swiss-ui/icons

SVG icon set for the Swiss UI design system.

Installation

npm install @swiss-ui/icons

Usage

As a Library

You can import individual icon functions or a general getIcon helper.

import { ArrowRight, getIcon } from '@swiss-ui/icons';

// Using a specific icon function
const arrow = ArrowRight({ size: 32, color: 'blue' });

// Using the helper
const icon = getIcon('check-circle', { strokeWidth: 1.5 });

As a Web Component

Register the web component (auto-registers on import from the subpath) and use it in your HTML:

// Import to register <swiss-icon>
import '@swiss-ui/icons/web-components';

<swiss-icon name="search" size="20" color="#333" stroke-width="2"></swiss-icon>

Customization

All icons support the following properties:

Property	Type	Default	Description
size	number	24	Width and height in pixels
color	string	currentColor	Stroke color (supports any CSS color value)
strokeWidth	number	2	Thickness of the icon lines
class	string	undefined	Additional CSS class for the <svg> element

Development

Adding New Icons

1. Place your new SVG file in src/icons/.
2. Ensure it uses a 24x24 viewbox and stroke="currentColor".
3. Run the build script to generate the TypeScript source:

npm run build:icons

Building the Project

To build the library for distribution:

npm run build

License

AGPL-3.0-only. See LICENSE for details.