diff --git a/.changeset/angry-clocks-fry.md b/.changeset/angry-clocks-fry.md new file mode 100644 index 0000000000..945c314643 --- /dev/null +++ b/.changeset/angry-clocks-fry.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/icon': minor +--- + +Adds ImportantWithCircle glyph to Icon library diff --git a/packages/icon/README.md b/packages/icon/README.md index 26d3fb04e2..c6439c89df 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -35,12 +35,12 @@ const SomeComponent = () => ; ## Properties -| Prop | Type | Description | Default | -| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `glyph` | **Required**: `'ActivityFeed'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Copy'`, `'Bell'`, `'Building'`, `'CaretUp'`, `'CaretDown'`, `'CaretRight'`, `'CaretLeft'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronUp'`, `'ChevronDown'`, `'ChevronRight'`, `'ChevronLeft'`, `'Charts'`, `'Cloud'`, `'CreditCard'`, `'Edit'`, `'Ellipsis'`, `'Folder'`, `'InfoWithCircle'`, `'InviteUser'`, `'Laptop'`, `'Lock'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'NotAllowed'`, `'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` | `string` or `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` or `boolean` or `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. | | +| Prop | Type | Description | Default | +| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `glyph` | **Required**: `'ActivityFeed'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Copy'`, `'Bell'`, `'Building'`, `'CaretUp'`, `'CaretDown'`, `'CaretRight'`, `'CaretLeft'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronUp'`, `'ChevronDown'`, `'ChevronRight'`, `'ChevronLeft'`, `'Charts'`, `'Cloud'`, `'CreditCard'`, `'Edit'`, `'Ellipsis'`, `'Folder'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Laptop'`, `'Lock'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'NotAllowed'`, `'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` | `string` or `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` or `boolean` or `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. | | ## Advanced Usage (Registering custom icon sets) diff --git a/packages/icon/src/glyphs/Folder.svg b/packages/icon/src/glyphs/Folder.svg index 3017a97699..07203e48e1 100644 --- a/packages/icon/src/glyphs/Folder.svg +++ b/packages/icon/src/glyphs/Folder.svg @@ -6,4 +6,4 @@ - \ No newline at end of file + diff --git a/packages/icon/src/glyphs/ImportantWithCircle.svg b/packages/icon/src/glyphs/ImportantWithCircle.svg new file mode 100644 index 0000000000..521c31a9cf --- /dev/null +++ b/packages/icon/src/glyphs/ImportantWithCircle.svg @@ -0,0 +1,8 @@ + + + Important With Circle + Created with Sketch. + + + + diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts index aa882205e4..426e81d4b6 100644 --- a/packages/icon/src/glyphs/index.ts +++ b/packages/icon/src/glyphs/index.ts @@ -26,6 +26,7 @@ import CreditCard from './CreditCard.svg'; import Edit from './Edit.svg'; import Ellipsis from './Ellipsis.svg'; import Folder from './Folder.svg'; +import ImportantWithCircle from './ImportantWithCircle.svg'; import InfoWithCircle from './InfoWithCircle.svg'; import InviteUser from './InviteUser.svg'; import Laptop from './Laptop.svg'; @@ -80,6 +81,7 @@ const glyphs = { Edit, Ellipsis, Folder, + ImportantWithCircle, InfoWithCircle, InviteUser, Laptop,