diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f0802c8d1a..e2a1a3813f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -112,8 +112,6 @@ If you have added any icon (custom or from codicon), you will have to run `yarn svgr` or `yarn install` to ensure the icon is now available in the codebase. -You should also add any added icon to `webview/src/stories/Icons.stories.tsx`. - To use an icon, import it from `webview/src/shared/components/icons` (from the index file, not the file itself) and use it with the `` component filling its `icon` prop with your imported icon. diff --git a/webview/src/stories/Icons.stories.tsx b/webview/src/stories/Icons.stories.tsx index d31b181723..bfbe196674 100644 --- a/webview/src/stories/Icons.stories.tsx +++ b/webview/src/stories/Icons.stories.tsx @@ -5,33 +5,8 @@ import { IconWrapper } from './components/IconWrapper' import { IconsWrapper } from './components/IconsWrapper' import { DISABLE_CHROMATIC_SNAPSHOTS } from './util' import { Icon } from '../shared/components/Icon' -import { - Add, - Check, - ChevronDown, - ChevronRight, - Clock, - Close, - Copy, - ArrowDown, - Ellipsis, - Error, - Filter, - GitCommit, - GitMerge, - GraphLine, - GraphScatter, - Gripper, - ListFilter, - PassFilled, - Pinned, - Refresh, - SortPrecedence, - StarEmpty, - StarFull, - Trash, - ArrowUp -} from '../shared/components/icons' + +import * as Icons from '../shared/components/icons' export default { args: { @@ -44,83 +19,24 @@ export default { const Template: StoryFn = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + <> + + {Object.values(Icons).map(IconComponent => ( + + + + ))} + +

+ + Other icons that can be added + +

+

+ Copy the icon name, add it to `codicons` constant in + `webview/icons/generate.mjs` and run `yarn svgr`. +

+ ) }