carbon-icons-qwik

Carbon Design System SVG icons as Qwik components.

This zero-dependency icon library provides the Carbon Design System icons as Qwik components.

Inspired by carbon-components-svelte by Eric Liu.

Icon Index

See Icon Index

Installation

Install the icons in your Qwik project as a development dependency:

# pnpm
pnpm i -D carbon-icons-qwik

# npm
npm i -D carbon-icons-qwik

# Yarn
yarn add -D carbon-icons-qwik

Usage

Basic

In your Qwik component, import the desired icon - e.g. Edit:

import { Edit } from 'carbon-icons-qwik';

Render it in your component's JSX:

<div>
  <Edit />
</div>

Custom size

Set the size property to 16, 20, 24 or 32 (default is 32):

<Edit size={24} />

Title

Set the title as an accessibility enhancement (this will be rendered in most browsers as a tooltip):

<Edit title="Edit document" />

Fill color

The fill color can be set to any HTML color value using fill (default is currentColor):

<Edit fill="red" />

Note that you can also set color using CSS - e.g. svg { stroke: red }.

General attributes

You can apply any general HTML attribute to the icon component - e.g.:

<Edit id="edit_icon" class="highlighted" />

Which will emit:

<svg id="edit_icon" class="highlighted">

Contributing

See Contributing

Changelog

See CHANGELOG

Licence

Apache-2.0