@leafygreen-ui/icon
LeafyGreen UI Kit Icons
Last updated 8 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/icon 
SYNC missed versions from official npm registry.

Icon

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/icon

NPM

npm install @leafygreen-ui/icon

Example

import Icon from '@leafygreen-ui/icon';

const SomeComponent = () => <Icon glyph="Plus" fill="#FF0000" />;

Output HTML

<svg
  width="16"
  height="16"
  role="img"
  viewBox="0 0 16 16"
  class="leafygreen-ui-yqbynm"
>
  <title>Plus Icon</title>
  <path
    d="M9 7h4v2H9v4H7V9H3V7h4V3h2v4z"
    fill="currentColor"
    fill-rule="evenodd"
  ></path>
</svg>

Properties

Prop Type Description Default
glyph (Required) 'ActivityFeed', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Copy', 'Beaker', 'Bell', 'Building', 'CaretUp', 'CaretDown', 'CaretRight', 'CaretLeft', 'Checkmark', 'CheckmarkWithCircle', 'ChevronUp', 'ChevronDown', 'ChevronRight', 'ChevronLeft', 'Charts', 'Cloud', 'CreditCard', 'Download', 'Edit', 'Ellipsis', 'Folder', 'GovernmentBuilding', 'ImportantWithCircle', 'InfoWithCircle', 'InviteUser', 'Laptop', 'Lock', 'MagnifyingGlass', 'Megaphone', 'Menu', 'NotAllowed', 'Open New Tab', 'Person', 'PersonWithLock', 'Plus', 'PlusWithCircle', 'QuestionMarkWithCircle', 'Refresh', 'Save', 'Settings', 'SortAscending', 'SortDescending', 'Stitch', 'Support', 'Trash', 'University', 'Unsorted', 'UpDownCarets', 'VerticalEllipsis', 'Warning', 'X', 'XWithCircle' Specifies the glyph to use.
size 'small', 'default', 'large', 'xlarge', number The height and width of the glyph's viewBox. This can be any number or one of the following 'small', 'default', 'large', 'xlarge' 'default'
fill string The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor.
title string, boolean, null Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to false will entirely unset the title.
If title is undefined or null, a human-readable title will be generated based on the glyph's name.
... SVGR.ComponentProps All other props will be spread on the svg element

Advanced Usage (Registering custom icon sets)

This package exposes a method used to generate a custom version of the Icon component with any specified set of icons.

// Import the createIconComponent method from the Icon package
import { createIconComponent } from '@leafygreen-ui/Icon';

// Create your 'glyphs' object. For each key / value pair, the key will be the name of the icon,
// and the value can be any valid React component.
const myGlyphs = {
  MyCustomGlyph: () => <svg />,
};

// The createIconComponent function returns your custom Icon component.
const MyIconComponent = createIconComponent(myGlyphs);

// Your icon is now ready to use!
const SomeComponent = () => (
  <div>
    <MyIconComponent glyph="MyCustomGlyph" />
  </div>
);

We also export the default icon set for you! If you want to include our glyphs with your custom glyphs, you can do something like this:

import { createIconComponent, glyphs } from '@leafygreen-ui/Icon';

const myGlyphs = {
  ...glyphs,
  MyCustomGlyph: () => <svg />,
};

const MyIconComponent = createIconComponent(myGlyphs);

Note: Glyph has a static property, isGlyph, that enables checking whether or not a component is a LeafyGreen glyph.

Current Tags

  • 7.1.0                                ...           latest (8 days ago)

46 Versions

  • 7.1.0                                ...           8 days ago
  • 7.0.2                                ...           2 months ago
  • 7.0.1                                ...           3 months ago
  • 7.0.0                                ...           3 months ago
  • 6.7.0                                ...           4 months ago
  • 6.6.1                                ...           4 months ago
  • 6.6.0                                ...           4 months ago
  • 6.5.0                                ...           5 months ago
  • 6.4.2                                ...           5 months ago
  • 6.4.1                                ...           5 months ago
  • 6.4.0                                ...           5 months ago
  • 6.3.2                                ...           5 months ago
  • 6.3.1                                ...           5 months ago
  • 6.3.0                                ...           6 months ago
  • 6.2.0                                ...           6 months ago
  • 6.1.2                                ...           6 months ago
  • 6.1.1                                ...           7 months ago
  • 6.1.0                                ...           7 months ago
  • 6.0.1                                ...           7 months ago
  • 6.0.0                                ...           8 months ago
  • 5.2.0                                ...           8 months ago
  • 5.1.0                                ...           9 months ago
  • 5.0.3                                ...           9 months ago
  • 5.0.2                                ...           9 months ago
  • 5.0.1                                ...           10 months ago
  • 5.0.0                                ...           10 months ago
  • 4.3.0                                ...           10 months ago
  • 4.2.0                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.2.5                                ...           a year ago
  • 1.2.4                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |