@marioschmidt/design-system-icons-react

BILD Design System | React icon components with TypeScript support

Installation

npm install @marioschmidt/design-system-icons-react

Peer Dependencies:

• React 18+

Usage

Named Imports

import { IconAdd, IconMenu, IconSearch } from '@marioschmidt/design-system-icons-react';

function App() {
  return (
    <div>
      <IconAdd />
      <IconMenu />
      <IconSearch />
    </div>
  );
}

Individual Imports (Tree-Shakeable)

import { IconAdd } from '@marioschmidt/design-system-icons-react/IconAdd';
import IconMenu from '@marioschmidt/design-system-icons-react/IconMenu';

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | 24 | Icon size in pixels | | color | string | currentColor | Icon color | | aria-label | string | – | Accessible label (makes icon visible to screen readers) | | title | string | – | SVG title element (tooltip) | | className | string | – | CSS class name | | style | CSSProperties | – | Inline styles |

Accessibility

Decorative Icons (Default)

By default, icons are hidden from screen readers:

<IconAdd />
// Renders: <svg aria-hidden="true" role="img" ...>

Meaningful Icons

Add aria-label for icons that convey meaning:

<IconAdd aria-label="Add new item" />
// Renders: <svg aria-label="Add new item" role="img" ...>

With Tooltip

<IconAdd title="Add new item" aria-label="Add" />
// Renders: <svg aria-label="Add"><title>Add new item</title>...

Styling

Via CSS

Icons use currentColor and inherit the parent's text color:

<div style={{ color: 'blue' }}>
  <IconAdd /> {/* Blue icon */}
</div>

Via Props

<IconAdd size={32} color="#DD0000" />

Via Tailwind CSS

<IconAdd className="w-8 h-8 text-blue-500" />

TypeScript

Full TypeScript support with auto-completion:

import { IconAdd, type IconProps } from '@marioschmidt/design-system-icons-react';

const MyIcon: React.FC<IconProps> = (props) => <IconAdd {...props} />;

Icon List

See the full icon catalog in the main icons documentation.

Related Packages

| Package | Purpose | |---------|---------| | @marioschmidt/design-system-icons | Raw SVG files | | de.bild.design:icons | Android Vector Drawables | | BildIcons | iOS Swift Package |

License

MIT