README
Icon
View on MongoDB.design
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"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
class="leafygreen-ui-1gvnm9k"
role="img"
aria-label="Beaker Icon"
>
<path
d="M10.623 1a.886.886 0 01.041 1.772V5.34c0 .114.035.239.095.343l3.516 5.647.002.003c.232.387.356.818.356 1.254 0 .4-.106.804-.318 1.17l-.003.006-.004.007-.095.158A2.36 2.36 0 0112.217 15h-8.4c-.44 0-.86-.118-1.22-.333a2.448 2.448 0 01-.875-.904l-.001-.003a2.428 2.428 0 01-.301-1.163c0-.438.123-.877.367-1.268l3.53-5.647a.695.695 0 00.094-.343V2.772A.885.885 0 015.452 1zM8.904 2.774H7.185V5.34c0 .457-.136.892-.365 1.27l-.001.001-3.522 5.657a.644.644 0 00-.103.343c0 .102.026.2.081.296l.003.005a.62.62 0 00.553.329h8.4c.12 0 .223-.031.316-.087a.675.675 0 00.238-.898L9.272 6.612a2.324 2.324 0 01-.368-1.273V2.774zm.606 6.633l1.553 2.49a.227.227 0 01.01.243.223.223 0 01-.206.122H5.195c-.122 0-.187-.075-.206-.122-.028-.056-.056-.15.01-.243l1.553-2.49H9.51z"
fill="currentColor"
></path>
</svg>
Properties
Prop | Type | Description | Default |
---|---|---|---|
glyph (Required) |
'ActivityFeed' , 'AddFile' , 'Apps' , 'Array' , 'ArrowDown' , 'ArrowLeft' , 'ArrowRight' , 'ArrowUp' , 'Beaker' , 'Bell' , 'Building' , 'Calendar' , 'Copy' , 'CaretUp' , 'CaretDown' , 'CaretRight' , 'CaretLeft' , 'Checkmark' , 'CheckmarkWithCircle' , 'ChevronUp' , 'ChevronDown' , 'ChevronRight' , 'ChevronLeft' , 'Charts' , 'Clone' , 'Cloud' , 'Code' ,'CreditCard' , 'CurlyBraces' , 'Database' , 'Diagram' , 'Download' , 'Edit' , 'Ellipsis' , 'Export' , 'Favorite' , 'Filter' , 'File' , 'Folder' , 'FullScreenEnter' , 'FullScreenExit' , 'GlobeAmericas' , 'GovernmentBuilding' , 'Home' , 'ImportantWithCircle' , 'InfoWithCircle' , 'InviteUser' , 'Laptop' , 'Lock' , 'MagnifyingGlass' , 'Megaphone' , 'Menu' , 'Minus' , 'NotAllowed' , 'Open New Tab' , 'Pause' , 'Person' , 'PersonGroup' , 'PersonWithLock' , 'Play' , 'Plus' , 'PlusWithCircle' , 'QuestionMarkWithCircle' , 'Refresh' , 'Save' , 'Settings' , 'Shell' ,'SortAscending' , 'SortDescending' , 'Stitch' , 'Support' , 'Table' , 'TimeSeries' , 'Trash' , 'University' , 'Unlock' , 'Unsorted' , 'UpDownCarets' , 'Upload' , 'VerticalEllipsis' , 'Visibility' , 'VisibilityOff' , '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.