Read and transform svg icons from list #3872
Conversation
|
Code Climate has analyzed commit 9131f25 and detected 0 issues on this pull request. The test coverage on the diff in this pull request is 100.0% (85% is the threshold). This pull request will bring the total coverage in the repository to 94.9% (0.0% change). View more on Code Climate. |
| @@ -13,7 +13,7 @@ | |||
| "test": "jest --collect-coverage", | |||
| "storybook": "storybook dev -p 6006", | |||
| "build-storybook": "storybook build --webpack-stats-json", | |||
| "svgr": "svgr --out-dir src/shared/components/icons --ignore-existing ../node_modules/@vscode/codicons/src/icons && svgr -d src/shared/components/icons icons/" | |||
There was a problem hiding this comment.
This is my first time actually seeing this command! Looking at it, I'm assuming we used this to generate chosen icon components? I've just been creating them manually 🤣
There was a problem hiding this comment.
Yes, that is why I also added steps in the contributing guide. To be honest, I've been creating them manually as well for a while too because the process was broken. Running the command would generate every codicon, you would then have to remove all the ones you don't need.
|
|
||
| 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 |
There was a problem hiding this comment.
Do we need this last paragraph about importing? I feel like it would be obvious how to import and render an Icon by looking at the codebase (it definitely was for me when I needed an icon for the first time).
There was a problem hiding this comment.
It depends where you import it. If there are no example in the file you're trying to import the icon from, looking at our other imports, you might go directly for the file. I know I've made the comment more than once in PRs. It's mostly that it goes against how we import in general (using an index file).
| @@ -38,6 +38,8 @@ jobs: | |||
|
|
|||
| - run: yarn run install-frozen-lockfile | |||
|
|
|||
| - run: yarn svgr | |||
|
|
|||
There was a problem hiding this comment.
This makes sure no one manually creates or edits icons.
* Automatically add new icons to the icons story in Storybook * Add available codicons to Storybook (#3874)
* Cleaned up svg icons * Read and transform svg icons from list (#3872) * Read and transform svg icons from list * Apply review comments * Automatically add new icons to the icons story in Storybook (#3873) * Automatically add new icons to the icons story in Storybook * Add available codicons to Storybook (#3874)
2/4 main <= #3871 <= this <= #3873 <= #3874
Second step for #3848
This changes how SVGR works. Instead of using the CLI, there is now a script that takes all custom icons and specific codicons and generates the React components. This should make it easier to add and remove icons. I've also added some instructions in the contributing guide so that it's easy for anyone to add a new icon.