carbon-icons-qwik v11.39.1
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-qwikUsage
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