Nascent Political Miscreant

    @devtools-ds/icon
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    @devtools-ds/icon

    A set of React-packaged SVG icons commonly used in developer tools.

    Installation

    npm i @devtools-ds/icon
    # or with yarn
    yarn add @devtools-ds/icon

    Accessibility Approach

    By default, all icons are set to aria-hidden and focusable="false" in order to hide them from screen readers and stop focus on Microsoft browsers. Most of the time, these icons will be accompanied by text which should properly label them. If your icon is being used as a button, wrap it in a button component with the proper labeling instead of labeling the icon.

    Usage

    Icons are packaged as individual React components.

    import { AlertIcon } from "@devtools-ds/icon";
    
    // individual icon
    <AlertIcon />;

    Sizing

    There are three ways to size the icons: a size prop, inline, or with width and height. I've included an example of each below.

    import { AlertIcon } from '@devtools-ds/icon';
    
    // This will resize based on the four preset icon sizes used in the design system.
    <AlertIcon size="large"/>
    // This will inherit the fontSize attribute in order to work inline with text.
    <AlertIcon inline />
    // This will resize using normal SVG resize controls
    <AlertIcon width="30px" />

    Inline Icons and currentColor

    The inline prop makes the icon inherit the fontSize css attribute, and position itself inline with text around it. By default, the icon has fill="currentColor" set based on the currentColor css attribute. This will inherit the surrounding font color, but can be overwritten as needed.

    References

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Tyler Krupicka

    💻 📖 🎨 🚇 💡 ⚠️

    Adam Dierkens

    💻

    kharrop

    🎨

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Keywords

    none

    Install

    npm i @devtools-ds/icon

    DownloadsWeekly Downloads

    39

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    274 kB

    Total Files

    230

    Last publish

    Collaborators

    • tylerkrupicka