carbon-icons-svelte
Advanced tools
Carbon Design System SVG icons as Svelte components.
This zero dependency icon library builds Carbon Design System icons as Svelte components. Although best paired with carbon-components-svelte, these icons can be consumed standalone.
Try it in the Svelte REPL.
# npm
npm i carbon-icons-svelte
# pnpm
pnpm i carbon-icons-svelte
# Yarn
yarn add carbon-icons-svelte
# Bun
bun add carbon-icons-svelte
Import the icon from the carbon-icons-svelte/lib folder. See the Icon Index for a list of supported icons.
<script>
import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>
<Add />
Use the size prop to specify the icon size.
Supported icon sizes include 16, 20, 24, and 32.
The default size is 16.
<Add size={16} />
<Add size={20} />
<Add size={24} />
<Add size={32} />
$$restProps are forwarded to the svg element.
You can use fill to customize the color or pass any other valid svg attribute to the component.
<Add fill="red" class="icon" />
<Add aria-label="Add" />
<Add aria-label="Add" tabindex="0" />
<label id="add-file">Add file</label>
<Add aria-labelledby="add-file" />
All props are optional.
| Name | Type | Default value |
|---|---|---|
| size | 16 | 20 | 24 | 32 | 16 |
| title | string | undefined |
FAQs
Carbon Design System SVG icons as Svelte components
The npm package carbon-icons-svelte receives a total of 7,433 weekly downloads. As such, carbon-icons-svelte popularity was classified as popular.
We found that carbon-icons-svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.