material-icon-theme 4.14.0 → 4.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/.eslintrc.json +51 -51
  2. package/.github/FUNDING.yml +3 -3
  3. package/.github/ISSUE_TEMPLATE/bug_report.md +34 -34
  4. package/.github/ISSUE_TEMPLATE/icon_request.md +27 -27
  5. package/.github/workflows/build.yml +45 -45
  6. package/.github/workflows/color-check.yml +22 -22
  7. package/.github/workflows/release.yml +73 -73
  8. package/.prettierrc +7 -7
  9. package/.vscode/extensions.json +3 -3
  10. package/.vscode/launch.json +43 -43
  11. package/.vscode/settings.json +14 -14
  12. package/.vscode/tasks.json +32 -32
  13. package/.vscodeignore +20 -20
  14. package/CHANGELOG.md +1135 -1101
  15. package/CONTRIBUTING.md +62 -62
  16. package/LICENSE.md +8 -8
  17. package/README.md +209 -209
  18. package/build/web-extension.webpack.config.js +62 -62
  19. package/build/webpack.config.js +39 -39
  20. package/changelog.config.json +4 -4
  21. package/icons/astyle.svg +4 -4
  22. package/icons/blitz.svg +4 -4
  23. package/icons/cypress.svg +4 -4
  24. package/icons/dependabot.svg +4 -4
  25. package/icons/dinophp.svg +16 -16
  26. package/icons/figma.svg +10 -10
  27. package/icons/folder-angular-open.svg +2 -2
  28. package/icons/folder-angular.svg +2 -2
  29. package/icons/folder-cypress-open.svg +5 -5
  30. package/icons/folder-cypress.svg +5 -5
  31. package/icons/folder-java-open.svg +2 -2
  32. package/icons/folder-java.svg +2 -2
  33. package/icons/folder-next-open.svg +2 -2
  34. package/icons/folder-next.svg +2 -2
  35. package/icons/folder-queue-open.svg +2 -2
  36. package/icons/folder-queue.svg +2 -2
  37. package/icons/folder-resolver-open.svg +2 -2
  38. package/icons/folder-resolver.svg +2 -2
  39. package/icons/folder-serverless-open.svg +5 -5
  40. package/icons/folder-serverless.svg +5 -5
  41. package/icons/folder-target-open.svg +2 -2
  42. package/icons/folder-target.svg +2 -2
  43. package/icons/folder-unity-open.svg +2 -0
  44. package/icons/folder-unity.svg +2 -0
  45. package/icons/folder-vercel-open.svg +4 -4
  46. package/icons/folder-vercel.svg +4 -4
  47. package/icons/gleam.svg +4 -4
  48. package/icons/gridsome.svg +4 -4
  49. package/icons/hardhat.svg +3 -3
  50. package/icons/lighthouse.svg +2 -2
  51. package/icons/ndst.svg +7 -7
  52. package/icons/next.svg +3 -3
  53. package/icons/next_light.svg +2 -2
  54. package/icons/odin.svg +6 -6
  55. package/icons/parcel.svg +4 -4
  56. package/icons/playwright.svg +7 -7
  57. package/icons/pnpm.svg +9 -9
  58. package/icons/pnpm_light.svg +7 -7
  59. package/icons/poetry.svg +1 -0
  60. package/icons/processing.svg +10 -1
  61. package/icons/remix.svg +4 -4
  62. package/icons/remix_light.svg +4 -4
  63. package/icons/rome.svg +5 -5
  64. package/icons/serverless.svg +4 -4
  65. package/icons/siyuan.svg +9 -9
  66. package/icons/steadybit.svg +1 -0
  67. package/icons/svgr.svg +4 -4
  68. package/icons/tauri.svg +9 -9
  69. package/icons/template.svg +4 -4
  70. package/icons/tobi.svg +4 -4
  71. package/icons/tobimake.svg +14 -14
  72. package/icons/turborepo.svg +12 -0
  73. package/icons/turborepo_light.svg +12 -0
  74. package/images/contributors.png +0 -0
  75. package/images/fileIcons.png +0 -0
  76. package/images/folderIcons.png +0 -0
  77. package/logo.svg +21 -21
  78. package/material-colors.yml +257 -257
  79. package/package.json +264 -264
  80. package/package.nls.de.json +35 -35
  81. package/package.nls.es.json +32 -32
  82. package/package.nls.fr.json +32 -32
  83. package/package.nls.ja.json +35 -35
  84. package/package.nls.json +35 -35
  85. package/package.nls.nl.json +35 -35
  86. package/package.nls.pl.json +35 -35
  87. package/package.nls.pt-BR.json +32 -32
  88. package/package.nls.pt-PT.json +32 -32
  89. package/package.nls.ru.json +32 -32
  90. package/package.nls.zh-CN.json +32 -32
  91. package/package.nls.zh-TW.json +32 -32
  92. package/src/commands/activate.ts +26 -26
  93. package/src/commands/explorerArrows.ts +55 -55
  94. package/src/commands/folderColor.ts +96 -96
  95. package/src/commands/folders.ts +55 -55
  96. package/src/commands/grayscale.ts +55 -55
  97. package/src/commands/iconPacks.ts +68 -68
  98. package/src/commands/index.ts +30 -30
  99. package/src/commands/opacity.ts +46 -46
  100. package/src/commands/restoreConfig.ts +14 -14
  101. package/src/commands/saturation.ts +46 -46
  102. package/src/extension.ts +35 -35
  103. package/src/helpers/changeDetection.ts +68 -68
  104. package/src/helpers/customIcons.ts +8 -8
  105. package/src/helpers/fileConfig.ts +37 -37
  106. package/src/helpers/index.ts +100 -100
  107. package/src/helpers/objects.ts +58 -58
  108. package/src/helpers/types.ts +7 -7
  109. package/src/helpers/versioning.ts +73 -73
  110. package/src/i18n/index.ts +78 -78
  111. package/src/i18n/lang-de.ts +54 -54
  112. package/src/i18n/lang-en.ts +53 -53
  113. package/src/i18n/lang-es.ts +53 -53
  114. package/src/i18n/lang-fr.ts +53 -53
  115. package/src/i18n/lang-ja.ts +54 -54
  116. package/src/i18n/lang-nl.ts +54 -54
  117. package/src/i18n/lang-pl.ts +52 -52
  118. package/src/i18n/lang-pt-br.ts +53 -53
  119. package/src/i18n/lang-pt-pt.ts +53 -53
  120. package/src/i18n/lang-ru.ts +52 -52
  121. package/src/i18n/lang-uk.ts +54 -54
  122. package/src/i18n/lang-zh-cn.ts +52 -52
  123. package/src/i18n/lang-zh-tw.ts +52 -52
  124. package/src/icons/fileIcons.ts +1854 -1782
  125. package/src/icons/folderIcons.ts +754 -711
  126. package/src/icons/generator/constants.ts +29 -29
  127. package/src/icons/generator/fileGenerator.ts +216 -216
  128. package/src/icons/generator/folderGenerator.ts +340 -340
  129. package/src/icons/generator/iconOpacity.ts +111 -111
  130. package/src/icons/generator/iconSaturation.ts +140 -140
  131. package/src/icons/generator/index.ts +7 -7
  132. package/src/icons/generator/jsonGenerator.ts +187 -187
  133. package/src/icons/generator/languageGenerator.ts +127 -127
  134. package/src/icons/index.ts +4 -4
  135. package/src/icons/languageIcons.ts +134 -134
  136. package/src/messages/outdated.ts +33 -33
  137. package/src/messages/reload.ts +32 -32
  138. package/src/messages/start.ts +12 -12
  139. package/src/messages/update.ts +48 -48
  140. package/src/messages/welcome.ts +47 -47
  141. package/src/models/helpers/index.ts +1 -1
  142. package/src/models/helpers/themeStatus.ts +5 -5
  143. package/src/models/i18n/index.ts +1 -1
  144. package/src/models/i18n/translation.ts +50 -50
  145. package/src/models/iconConfiguration.ts +37 -37
  146. package/src/models/icons/defaultIcon.ts +16 -16
  147. package/src/models/icons/files/fileIcon.ts +49 -49
  148. package/src/models/icons/files/fileTypes.ts +14 -14
  149. package/src/models/icons/files/index.ts +2 -2
  150. package/src/models/icons/folders/folderIcon.ts +34 -34
  151. package/src/models/icons/folders/folderTheme.ts +23 -23
  152. package/src/models/icons/folders/index.ts +2 -2
  153. package/src/models/icons/iconJsonOptions.ts +23 -23
  154. package/src/models/icons/iconPack.ts +12 -12
  155. package/src/models/icons/index.ts +6 -6
  156. package/src/models/icons/languages/index.ts +1 -1
  157. package/src/models/icons/languages/languageIdentifier.ts +26 -26
  158. package/src/models/index.ts +4 -4
  159. package/src/models/scripts/contributors/contributor.ts +22 -22
  160. package/src/models/scripts/contributors/contributorsConfig.ts +10 -10
  161. package/src/scripts/contributors/contributors.css +24 -24
  162. package/src/scripts/contributors/index.ts +138 -138
  163. package/src/scripts/helpers/painter.ts +5 -5
  164. package/src/scripts/helpers/screenshots.ts +32 -32
  165. package/src/scripts/helpers/similarity.ts +47 -47
  166. package/src/scripts/helpers/titleCase.ts +7 -7
  167. package/src/scripts/icons/checks/checkIconAvailability.ts +215 -215
  168. package/src/scripts/icons/checks/checkIconConflicts.ts +154 -154
  169. package/src/scripts/icons/checks/checkIconUsage.ts +141 -141
  170. package/src/scripts/icons/checks/index.ts +7 -7
  171. package/src/scripts/icons/generateJson.ts +11 -11
  172. package/src/scripts/preview/index.ts +40 -40
  173. package/src/scripts/preview/preview.ts +165 -165
  174. package/src/scripts/preview/style.css +48 -48
  175. package/src/test/runTest.ts +26 -26
  176. package/src/test/spec/i18n/i18n.spec.ts +61 -61
  177. package/src/test/spec/icons/fileIcons.spec.ts +250 -250
  178. package/src/test/spec/icons/folderIcons.spec.ts +418 -418
  179. package/src/test/spec/icons/languageIcons.spec.ts +184 -184
  180. package/src/test/spec/index.ts +36 -36
  181. package/src/web/extension.ts +10 -10
  182. package/svgo.config.js +11 -11
  183. package/tsconfig.json +23 -23
  184. package/.github/workflows/greetings.yml +0 -17
  185. package/icons/processing_light.svg +0 -1
package/CONTRIBUTING.md CHANGED
@@ -1,62 +1,62 @@
1
- <h1>Contributing</h1>
2
-
3
- <!-- TOC -->
4
-
5
- - [Create issues](#create-issues)
6
- - [Add new icons](#add-new-icons)
7
- - [Icon color](#icon-color)
8
- - [Free software to create/edit SVG icons](#free-software-to-createedit-svg-icons)
9
- - [Use icons from here](#use-icons-from-here)
10
- - [Add translations](#add-translations)
11
- - [Update API](#update-api)
12
-
13
- <!-- /TOC -->
14
-
15
- ## Create issues
16
-
17
- You need an icon for a specific file ending? No problem, just follow these guidelines:
18
-
19
- - describe the file ending (e.g. '.xml') and the language (e.g. XML)
20
- - show an example image of the icon or link to official website
21
-
22
- ## Add new icons
23
-
24
- 1. Create icon as SVG
25
- 2. Copy icon to `icons`-folder
26
- 3. Edit the icon configuration files under `src/icons` folder:
27
- - fileIcons.ts
28
- - folderIcons.ts
29
- - languageIcons.ts
30
-
31
- ### Icon color
32
-
33
- Choose your icon colors from the [material design colors](https://material.io/design/color/the-color-system.html#tools-for-picking-colors). Alternatively, the [Material Color Converter](https://pkief.github.io/material-color-converter/) allows you to pick the correct color by matching a custom color code with the colors of the Material Design color palette.
34
-
35
- ### Free software to create/edit SVG icons
36
-
37
- - [Inkscape](https://inkscape.org/en/) is a free, open source SVG editor
38
- - There are tools available to convert PNG/JPG images to SVG - [Autotracer.org](https://autotracer.org) and [Vectorizer.io](https://vectorizer.io) are two examples.
39
- - It's important to produce fully _vectorized_ graphic (don't include a base64 image string in the svg).
40
-
41
- ### Use icons from here
42
-
43
- - [Material Design Icons](https://materialdesignicons.com/)
44
- - download them as SVG and edit the icons e.g. with Inkscape
45
- - you can use any other source **as long as the icons are free to use!** This icon theme is absolutely non-commercial, but you should always check the license of your sources!
46
-
47
- ### Test your icons before submitting
48
- - Preview your own custom icons locally before submitting a Pull Request. See [Custom icon associations](README.md#custom-icon-associations) in README.md for instructions.
49
-
50
-
51
- ## Add translations
52
-
53
- - Create or edit the translations in the `src/i18n` directory.
54
- - Create or edit the `package.nls.*.json` files in the root folder
55
-
56
- ## Update API
57
-
58
- 1. Install node dependencies with `npm install`
59
- 2. Open project with VS Code
60
- 3. Press `F5` or run `Launch Extension` in the debug window
61
- 4. Run tests with `Launch Tests`
62
-
1
+ <h1>Contributing</h1>
2
+
3
+ <!-- TOC -->
4
+
5
+ - [Create issues](#create-issues)
6
+ - [Add new icons](#add-new-icons)
7
+ - [Icon color](#icon-color)
8
+ - [Free software to create/edit SVG icons](#free-software-to-createedit-svg-icons)
9
+ - [Use icons from here](#use-icons-from-here)
10
+ - [Add translations](#add-translations)
11
+ - [Update API](#update-api)
12
+
13
+ <!-- /TOC -->
14
+
15
+ ## Create issues
16
+
17
+ You need an icon for a specific file ending? No problem, just follow these guidelines:
18
+
19
+ - describe the file ending (e.g. '.xml') and the language (e.g. XML)
20
+ - show an example image of the icon or link to official website
21
+
22
+ ## Add new icons
23
+
24
+ 1. Create icon as SVG
25
+ 2. Copy icon to `icons`-folder
26
+ 3. Edit the icon configuration files under `src/icons` folder:
27
+ - fileIcons.ts
28
+ - folderIcons.ts
29
+ - languageIcons.ts
30
+
31
+ ### Icon color
32
+
33
+ Choose your icon colors from the [material design colors](https://material.io/design/color/the-color-system.html#tools-for-picking-colors). Alternatively, the [Material Color Converter](https://pkief.github.io/material-color-converter/) allows you to pick the correct color by matching a custom color code with the colors of the Material Design color palette.
34
+
35
+ ### Free software to create/edit SVG icons
36
+
37
+ - [Inkscape](https://inkscape.org/en/) is a free, open source SVG editor
38
+ - There are tools available to convert PNG/JPG images to SVG - [Autotracer.org](https://autotracer.org) and [Vectorizer.io](https://vectorizer.io) are two examples.
39
+ - It's important to produce fully _vectorized_ graphic (don't include a base64 image string in the svg).
40
+
41
+ ### Use icons from here
42
+
43
+ - [Material Design Icons](https://materialdesignicons.com/)
44
+ - download them as SVG and edit the icons e.g. with Inkscape
45
+ - you can use any other source **as long as the icons are free to use!** This icon theme is absolutely non-commercial, but you should always check the license of your sources!
46
+
47
+ ### Test your icons before submitting
48
+ - Preview your own custom icons locally before submitting a Pull Request. See [Custom icon associations](README.md#custom-icon-associations) in README.md for instructions.
49
+
50
+
51
+ ## Add translations
52
+
53
+ - Create or edit the translations in the `src/i18n` directory.
54
+ - Create or edit the `package.nls.*.json` files in the root folder
55
+
56
+ ## Update API
57
+
58
+ 1. Install node dependencies with `npm install`
59
+ 2. Open project with VS Code
60
+ 3. Press `F5` or run `Launch Extension` in the debug window
61
+ 4. Run tests with `Launch Tests`
62
+
package/LICENSE.md CHANGED
@@ -1,8 +1,8 @@
1
- The MIT License (MIT)
2
- Copyright (c) 2021 Philipp Kief
3
-
4
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5
-
6
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7
-
8
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1
+ The MIT License (MIT)
2
+ Copyright (c) 2021 Philipp Kief
3
+
4
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5
+
6
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7
+
8
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,209 +1,209 @@
1
- <h1 align="center">
2
- <br>
3
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/logo.png" alt="logo" width="200">
4
- <br><br>
5
- Material Icon Theme
6
- <br>
7
- <br>
8
- </h1>
9
-
10
- <h4 align="center">Get the Material Design icons into your VS Code.</h4>
11
-
12
- <p align="center">
13
- <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/version-short/pkief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=VERSION" alt="Version"></a>&nbsp;
14
- <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/rating-short/pkief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Rating" alt="Rating"></a>&nbsp;
15
- <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/installs-short/PKief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Installs" alt="Installs"></a>&nbsp;
16
- <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/downloads-short/PKief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Downloads" alt="Downloads"></a>
17
- </p>
18
-
19
- <p align="center"><br>
20
- <b>Sponsored by</b><br><br>
21
- <a title="Try CodeStream" href="https://sponsorlink.codestream.com/?utm_source=vscmarket&amp;utm_campaign=pkief_material&amp;utm_medium=banner"><img width="198px" src="https://alt-images.codestream.com/codestream_logo_pkief_material.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
22
- <a title="Try Stepsize" href="https://marketplace.visualstudio.com/items?itemName=Stepsize.stepsize"><img width="200px" src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/stepsize.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
23
- <a title="Try CodeStream" href="https://bit.ly/3gtiOFF"><img width="180px" src="https://storage.googleapis.com/gitduck/img/duckly-sponsor-vsc-opt.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
24
- <a title="Try Bloop" href="https://bloop.ai/?utm_source=vscmarket&utm_campaign=material-icon-theme&utm_medium=banner"><img width="150px" src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/bloop.png"></a>
25
- </p>
26
-
27
- ### File icons
28
-
29
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/fileIcons.png" alt="file icons">
30
-
31
- ### Folder icons
32
-
33
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/folderIcons.png" alt="folder icons">
34
-
35
- #### Customize folder color
36
-
37
- You can change the color of the default folder icon using the command palette:
38
-
39
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/set-folder-color.gif" alt="custom folder colors">
40
-
41
- or via user settings:
42
-
43
- ```json
44
- "material-icon-theme.folders.color": "#ef5350",
45
- ```
46
-
47
- #### Folder themes
48
-
49
- You can change the design of the folder icons using the command palette:
50
-
51
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/set-folder-theme.gif" alt="folder themes">
52
-
53
- or via user settings:
54
-
55
- ```json
56
- "material-icon-theme.folders.theme": "specific"
57
- ```
58
-
59
- ## Custom icon opacity
60
-
61
- You can set a custom opacity for the icons:
62
-
63
- ```json
64
- "material-icon-theme.opacity": 0.5
65
- ```
66
-
67
- ## Custom icon saturation
68
-
69
- If colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0:
70
-
71
- ```json
72
- "material-icon-theme.saturation": 0.5
73
- ```
74
-
75
- ## Custom icon associations
76
-
77
- You can customize the icon associations directly in the user settings.
78
-
79
- ### File associations
80
-
81
- With the `*.[extension]` pattern you can define custom file icon associations. For example you could define an icon for `*.sample` and every file that ends with `.sample` will have the defined icon. However, not all files with the same file extension always have the same icon. For some specific file names there is a special icon. In order to overwrite all the specific file icons as well, two asterisks must be set instead of one, i.e. `**.[extension]`.
82
-
83
- If there's no leading `*` it will be automatically configured as filename and not as file extension.
84
-
85
- ```json
86
- "material-icon-theme.files.associations": {
87
- "*.ts": "typescript",
88
- "**.json": "json",
89
- "fileName.ts": "angular"
90
- }
91
- ```
92
-
93
- #### Custom SVG icons
94
-
95
- It's possible to add custom icons by adding a path to an SVG file which is located relative to the extension's dist folder. However, the restriction applies that the directory in which the custom icons are located must be within the `extensions` directory of the `.vscode` folder in the user directory.
96
-
97
- For example a custom SVG file called `sample.svg` can be placed in an `icons` folder inside of VS Code's `extensions` folder:
98
-
99
- ```
100
- .vscode
101
- ┗ extensions
102
- ┗ icons
103
- ┗ sample.svg
104
- ```
105
-
106
- In the settings.json the icon can be associated to a file name or file extension like this:
107
-
108
- ```json
109
- "material-icon-theme.files.associations": {
110
- "fileName.ts": "../../icons/sample"
111
- }
112
- ```
113
-
114
- _Note: The custom file name must be configured in the settings without the file ending `.svg` as shown in the example above._
115
-
116
- ### Folder associations
117
-
118
- The following configuration can customize the folder icons. It is also possible to overwrite existing associations and create nice combinations. For example you could change the folder theme to "classic" and define icons only for the folder names you like.
119
-
120
- ```json
121
- "material-icon-theme.folders.associations": {
122
- "customFolderName": "src",
123
- "sample": "dist"
124
- }
125
- ```
126
-
127
- #### Custom SVG folder icons
128
-
129
- Similar to the files, it is also possible to reference your own SVG icons for folder icons. Here it's important to provide two SVG files: one for the folder if it's closed and another one for the opened state. These two files - let's call them "folder-sample.svg" and "folder-sample-open.svg" - have to be placed into a directory which is relative to the extensions dist folder. This directory has to be somewhere inside of the `.vscode/extensions` folder.
130
-
131
- In our example we place them into an `icons` folder inside of the `.vscode/extensions` folder:
132
-
133
- ```
134
- .vscode
135
- ┗ extensions
136
- ┗ icons
137
- ┣ folder-sample.svg
138
- ┗ folder-sample-open.svg
139
- ```
140
-
141
- In the settings.json the folder icons can be associated to a folder name (e.g. "src") like this:
142
-
143
- ```json
144
- "material-icon-theme.folders.associations": {
145
- "src": "../../../../icons/folder-sample"
146
- }
147
- ```
148
-
149
- ### Language associations
150
-
151
- With the following configuration you can customize the language icons. It is also possible to overwrite existing associations.
152
-
153
- ```json
154
- "material-icon-theme.languages.associations": {
155
- "languageId": "iconName",
156
- "json": "json"
157
- }
158
- ```
159
-
160
- Available language ids:
161
-
162
- https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers
163
-
164
- You can see the available icon names in the overview above.
165
-
166
- ## One-click activation
167
-
168
- After installation or update you can click on the 'Activate'-button to activate the icon theme, if you haven't already. The icons will be visible immediately.
169
-
170
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/oneclickactivation.png" alt="activation">
171
-
172
- ## Commands
173
-
174
- Press `Ctrl-Shift-P` to open the command palette and type `Material Icons`.
175
-
176
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/commandPalette.png" alt="commands">
177
-
178
- <p></p>
179
-
180
- | Command | Description |
181
- | --------------------------------- | ---------------------------------------------------------------------------------- |
182
- | **Activate Icon Theme** | Activate the icon theme. |
183
- | **Change Folder Color** | Change the color of the folder icons. |
184
- | **Change Folder Theme** | Change the design of the folder icons. |
185
- | **Change Opacity** | Change the opacity of the icons. |
186
- | **Change Saturation** | Change the saturation value of the icons. |
187
- | **Configure Icon Packs** | Select an icon pack that enables additional icons (e.g. for Angular, React, Ngrx). |
188
- | **Hide Folder Arrows** | Hides the arrows next to the folder icons. |
189
- | **Restore Default Configuration** | Reset the default configurations of the icon theme. |
190
- | **Toggle Grayscale** | Sets the saturation of the icons to zero, so that they are grayscale. |
191
-
192
- ## Icon sources
193
-
194
- - [Material Design Icons](https://materialdesignicons.com/)
195
- - official icons
196
-
197
- ## Contributors
198
-
199
- <a href="https://github.com/PKief/vscode-material-icon-theme/graphs/contributors">
200
- <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/contributors.png" alt="Contributors">
201
- </a>
202
-
203
- **Would you like to contribute?**
204
-
205
- Take a look at the [contribution guidelines](https://github.com/PKief/vscode-material-icon-theme/blob/main/CONTRIBUTING.md) and open a [new issue](https://github.com/PKief/vscode-material-icon-theme/issues) or [pull request](https://github.com/PKief/vscode-material-icon-theme/pulls) on GitHub.
206
-
207
- ## Related extensions
208
-
209
- - [Material Icons for GitHub](https://github.com/Claudiohbsantos/github-material-icons-extension)
1
+ <h1 align="center">
2
+ <br>
3
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/logo.png" alt="logo" width="200">
4
+ <br><br>
5
+ Material Icon Theme
6
+ <br>
7
+ <br>
8
+ </h1>
9
+
10
+ <h4 align="center">Get the Material Design icons into your VS Code.</h4>
11
+
12
+ <p align="center">
13
+ <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/version-short/pkief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=VERSION" alt="Version"></a>&nbsp;
14
+ <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/rating-short/pkief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Rating" alt="Rating"></a>&nbsp;
15
+ <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/installs-short/PKief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Installs" alt="Installs"></a>&nbsp;
16
+ <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme"><img src="https://vsmarketplacebadge.apphb.com/downloads-short/PKief.material-icon-theme.svg?style=for-the-badge&colorA=252526&colorB=43A047&label=Downloads" alt="Downloads"></a>
17
+ </p>
18
+
19
+ <p align="center"><br>
20
+ <b>Sponsored by</b><br><br>
21
+ <a title="Try CodeStream" href="https://sponsorlink.codestream.com/?utm_source=vscmarket&amp;utm_campaign=pkief_material&amp;utm_medium=banner"><img width="198px" src="https://alt-images.codestream.com/codestream_logo_pkief_material.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
22
+ <a title="Try Stepsize" href="https://marketplace.visualstudio.com/items?itemName=Stepsize.stepsize"><img width="200px" src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/stepsize.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
23
+ <a title="Try CodeStream" href="https://bit.ly/3gtiOFF"><img width="180px" src="https://storage.googleapis.com/gitduck/img/duckly-sponsor-vsc-opt.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
24
+ <a title="Try Bloop" href="https://bloop.ai/?utm_source=vscmarket&utm_campaign=material-icon-theme&utm_medium=banner"><img width="150px" src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/bloop.png"></a>
25
+ </p>
26
+
27
+ ### File icons
28
+
29
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/fileIcons.png" alt="file icons">
30
+
31
+ ### Folder icons
32
+
33
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/folderIcons.png" alt="folder icons">
34
+
35
+ #### Customize folder color
36
+
37
+ You can change the color of the default folder icon using the command palette:
38
+
39
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/set-folder-color.gif" alt="custom folder colors">
40
+
41
+ or via user settings:
42
+
43
+ ```json
44
+ "material-icon-theme.folders.color": "#ef5350",
45
+ ```
46
+
47
+ #### Folder themes
48
+
49
+ You can change the design of the folder icons using the command palette:
50
+
51
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/set-folder-theme.gif" alt="folder themes">
52
+
53
+ or via user settings:
54
+
55
+ ```json
56
+ "material-icon-theme.folders.theme": "specific"
57
+ ```
58
+
59
+ ## Custom icon opacity
60
+
61
+ You can set a custom opacity for the icons:
62
+
63
+ ```json
64
+ "material-icon-theme.opacity": 0.5
65
+ ```
66
+
67
+ ## Custom icon saturation
68
+
69
+ If colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0:
70
+
71
+ ```json
72
+ "material-icon-theme.saturation": 0.5
73
+ ```
74
+
75
+ ## Custom icon associations
76
+
77
+ You can customize the icon associations directly in the user settings.
78
+
79
+ ### File associations
80
+
81
+ With the `*.[extension]` pattern you can define custom file icon associations. For example you could define an icon for `*.sample` and every file that ends with `.sample` will have the defined icon. However, not all files with the same file extension always have the same icon. For some specific file names there is a special icon. In order to overwrite all the specific file icons as well, two asterisks must be set instead of one, i.e. `**.[extension]`.
82
+
83
+ If there's no leading `*` it will be automatically configured as filename and not as file extension.
84
+
85
+ ```json
86
+ "material-icon-theme.files.associations": {
87
+ "*.ts": "typescript",
88
+ "**.json": "json",
89
+ "fileName.ts": "angular"
90
+ }
91
+ ```
92
+
93
+ #### Custom SVG icons
94
+
95
+ It's possible to add custom icons by adding a path to an SVG file which is located relative to the extension's dist folder. However, the restriction applies that the directory in which the custom icons are located must be within the `extensions` directory of the `.vscode` folder in the user directory.
96
+
97
+ For example a custom SVG file called `sample.svg` can be placed in an `icons` folder inside of VS Code's `extensions` folder:
98
+
99
+ ```
100
+ .vscode
101
+ ┗ extensions
102
+ ┗ icons
103
+ ┗ sample.svg
104
+ ```
105
+
106
+ In the settings.json the icon can be associated to a file name or file extension like this:
107
+
108
+ ```json
109
+ "material-icon-theme.files.associations": {
110
+ "fileName.ts": "../../icons/sample"
111
+ }
112
+ ```
113
+
114
+ _Note: The custom file name must be configured in the settings without the file ending `.svg` as shown in the example above._
115
+
116
+ ### Folder associations
117
+
118
+ The following configuration can customize the folder icons. It is also possible to overwrite existing associations and create nice combinations. For example you could change the folder theme to "classic" and define icons only for the folder names you like.
119
+
120
+ ```json
121
+ "material-icon-theme.folders.associations": {
122
+ "customFolderName": "src",
123
+ "sample": "dist"
124
+ }
125
+ ```
126
+
127
+ #### Custom SVG folder icons
128
+
129
+ Similar to the files, it is also possible to reference your own SVG icons for folder icons. Here it's important to provide two SVG files: one for the folder if it's closed and another one for the opened state. These two files - let's call them "folder-sample.svg" and "folder-sample-open.svg" - have to be placed into a directory which is relative to the extensions dist folder. This directory has to be somewhere inside of the `.vscode/extensions` folder.
130
+
131
+ In our example we place them into an `icons` folder inside of the `.vscode/extensions` folder:
132
+
133
+ ```
134
+ .vscode
135
+ ┗ extensions
136
+ ┗ icons
137
+ ┣ folder-sample.svg
138
+ ┗ folder-sample-open.svg
139
+ ```
140
+
141
+ In the settings.json the folder icons can be associated to a folder name (e.g. "src") like this:
142
+
143
+ ```json
144
+ "material-icon-theme.folders.associations": {
145
+ "src": "../../../../icons/folder-sample"
146
+ }
147
+ ```
148
+
149
+ ### Language associations
150
+
151
+ With the following configuration you can customize the language icons. It is also possible to overwrite existing associations.
152
+
153
+ ```json
154
+ "material-icon-theme.languages.associations": {
155
+ "languageId": "iconName",
156
+ "json": "json"
157
+ }
158
+ ```
159
+
160
+ Available language ids:
161
+
162
+ https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers
163
+
164
+ You can see the available icon names in the overview above.
165
+
166
+ ## One-click activation
167
+
168
+ After installation or update you can click on the 'Activate'-button to activate the icon theme, if you haven't already. The icons will be visible immediately.
169
+
170
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/oneclickactivation.png" alt="activation">
171
+
172
+ ## Commands
173
+
174
+ Press `Ctrl-Shift-P` to open the command palette and type `Material Icons`.
175
+
176
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/commandPalette.png" alt="commands">
177
+
178
+ <p></p>
179
+
180
+ | Command | Description |
181
+ | --------------------------------- | ---------------------------------------------------------------------------------- |
182
+ | **Activate Icon Theme** | Activate the icon theme. |
183
+ | **Change Folder Color** | Change the color of the folder icons. |
184
+ | **Change Folder Theme** | Change the design of the folder icons. |
185
+ | **Change Opacity** | Change the opacity of the icons. |
186
+ | **Change Saturation** | Change the saturation value of the icons. |
187
+ | **Configure Icon Packs** | Select an icon pack that enables additional icons (e.g. for Angular, React, Ngrx). |
188
+ | **Hide Folder Arrows** | Hides the arrows next to the folder icons. |
189
+ | **Restore Default Configuration** | Reset the default configurations of the icon theme. |
190
+ | **Toggle Grayscale** | Sets the saturation of the icons to zero, so that they are grayscale. |
191
+
192
+ ## Icon sources
193
+
194
+ - [Material Design Icons](https://materialdesignicons.com/)
195
+ - official icons
196
+
197
+ ## Contributors
198
+
199
+ <a href="https://github.com/PKief/vscode-material-icon-theme/graphs/contributors">
200
+ <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/contributors.png" alt="Contributors">
201
+ </a>
202
+
203
+ **Would you like to contribute?**
204
+
205
+ Take a look at the [contribution guidelines](https://github.com/PKief/vscode-material-icon-theme/blob/main/CONTRIBUTING.md) and open a [new issue](https://github.com/PKief/vscode-material-icon-theme/issues) or [pull request](https://github.com/PKief/vscode-material-icon-theme/pulls) on GitHub.
206
+
207
+ ## Related extensions
208
+
209
+ - [Material Icons for GitHub](https://github.com/Claudiohbsantos/github-material-icons-extension)