Skip to content

Commit da36a54

Browse files
committed
Update instructions for adding icons
1 parent f42d45e commit da36a54

File tree

2 files changed

+5
-3
lines changed

2 files changed

+5
-3
lines changed

packages/react-components/source/react/library/icon/Icon.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const Renderer = () => {
129129
3. _Engineering_: Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
130130
4. _Engineering_: Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
131131
5. _Engineering_: Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
132-
6. _Engineering_: Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/master/packages/react-components/source/react/library/icon/icons.js), specifying the icon name and native SVG sizes (usually "medium" for 16px but optionally also "tiny" for 8px, "small" for 12px, or "large" for 24px).
132+
6. _Engineering_: Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/master/packages/react-components/source/react/library/icon/icons.js) in alphabetical order, specifying the icon name and native SVG sizes (usually "medium" for 16px but optionally also "tiny" for 8px, "small" for 12px, or "large" for 24px).
133133

134134
## Disclaimer
135135
These icons include material from third parties and may be protected by their own, independent trademarks. Use of these materials is for illustrative purposes only and is not intended to infringe on the copyright or trademark of any of these third parties. Use of these materials does not imply endorsement by Puppet of the trademark holders.

packages/react-components/source/react/library/icon/icons.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22

3-
// Alphebetical list of icons
4-
// Sizes are tiny, small, medium, large in that order
3+
/** Alphabetical list of SVG icons
4+
* Sizes are tiny, small, medium, large in that order.
5+
* See Icon.md for instructions on adding new icons.
6+
*/
57
const icons = {
68
activity: {
79
medium: (

0 commit comments

Comments
 (0)