@storybook/icons
Advanced tools
The @storybook/icons package provides a set of icons specifically designed for use with Storybook, a popular tool for developing UI components in isolation. It includes icons that are commonly used in UI development and design systems, making it easier for developers to integrate visually consistent icons into their Storybook projects.
Using icons in Storybook UI
This feature allows developers to easily integrate icons into their Storybook UI. The example shows how to import and use an icon from the @storybook/icons package in a React component.
import { Icons } from '@storybook/icons';
function MyComponent() {
return <Icons icon='check' />;
}Like @storybook/icons, this package provides a comprehensive set of icons. FontAwesome is more extensive and widely used in various projects beyond Storybook. It offers a larger variety of icons and additional styling capabilities.
This package offers icons from Google's Material Design system. While @storybook/icons is tailored for Storybook integration, material-icons provides a broader range of icons suitable for general use across web and mobile applications, offering style consistency with Material Design guidelines.
This library contains the icons used in Storybook and Chromatic apps and marketing sites. They are 14x14. To view the list of all available icons please go to https://main--64b56e737c0aeefed9d5e675.chromatic.com/
yarn add @storybook/icons
This command will fetch all icons from Figma locally and create react components + stories automatically
yarn generate-icons
Inpired from this article.
Watch and rebuild code with tsup and runs Storybook to preview your UI during development.
yarn storybook
Build package with tsup for production.
yarn build
v1.2.10 (Fri Jul 26 2024)
FAQs
Icon library from the Storybook team
We found that @storybook/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.