codicons.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import { Emitter } from './event.js';
  6. class Registry {
  7. constructor() {
  8. this._icons = new Map();
  9. this._onDidRegister = new Emitter();
  10. }
  11. add(icon) {
  12. const existing = this._icons.get(icon.id);
  13. if (!existing) {
  14. this._icons.set(icon.id, icon);
  15. this._onDidRegister.fire(icon);
  16. }
  17. else if (icon.description) {
  18. existing.description = icon.description;
  19. }
  20. else {
  21. console.error(`Duplicate registration of codicon ${icon.id}`);
  22. }
  23. }
  24. get(id) {
  25. return this._icons.get(id);
  26. }
  27. get all() {
  28. return this._icons.values();
  29. }
  30. get onDidRegister() {
  31. return this._onDidRegister.event;
  32. }
  33. }
  34. const _registry = new Registry();
  35. export const iconRegistry = _registry;
  36. // Selects all codicon names encapsulated in the `$()` syntax and wraps the
  37. // results with spaces so that screen readers can read the text better.
  38. export function getCodiconAriaLabel(text) {
  39. if (!text) {
  40. return '';
  41. }
  42. return text.replace(/\$\((.*?)\)/g, (_match, codiconName) => ` ${codiconName} `).trim();
  43. }
  44. /**
  45. * The Codicon library is a set of default icons that are built-in in VS Code.
  46. *
  47. * In the product (outside of base) Codicons should only be used as defaults. In order to have all icons in VS Code
  48. * themeable, component should ise define new, component specific icons using `iconRegistry.registerIcon`.
  49. * In that call a Codicon can be names as default.
  50. */
  51. export class Codicon {
  52. constructor(id, definition, description) {
  53. this.id = id;
  54. this.definition = definition;
  55. this.description = description;
  56. _registry.add(this);
  57. }
  58. get classNames() { return 'codicon codicon-' + this.id; }
  59. // classNamesArray is useful for migrating to ES6 classlist
  60. get classNamesArray() { return ['codicon', 'codicon-' + this.id]; }
  61. get cssSelector() { return '.codicon.codicon-' + this.id; }
  62. }
  63. // built-in icons, with image name
  64. Codicon.add = new Codicon('add', { fontCharacter: '\\ea60' });
  65. Codicon.lightBulb = new Codicon('light-bulb', { fontCharacter: '\\ea61' });
  66. Codicon.warning = new Codicon('warning', { fontCharacter: '\\ea6c' });
  67. Codicon.info = new Codicon('info', { fontCharacter: '\\ea74' });
  68. Codicon.close = new Codicon('close', { fontCharacter: '\\ea76' });
  69. Codicon.sync = new Codicon('sync', { fontCharacter: '\\ea77' });
  70. Codicon.symbolFolder = new Codicon('symbol-folder', { fontCharacter: '\\ea83' });
  71. Codicon.symbolEvent = new Codicon('symbol-event', { fontCharacter: '\\ea86' });
  72. Codicon.error = new Codicon('error', { fontCharacter: '\\ea87' });
  73. Codicon.symbolVariable = new Codicon('symbol-variable', { fontCharacter: '\\ea88' });
  74. Codicon.symbolArray = new Codicon('symbol-array', { fontCharacter: '\\ea8a' });
  75. Codicon.symbolModule = new Codicon('symbol-module', { fontCharacter: '\\ea8b' });
  76. Codicon.symbolPackage = new Codicon('symbol-package', { fontCharacter: '\\ea8b' });
  77. Codicon.symbolNamespace = new Codicon('symbol-namespace', { fontCharacter: '\\ea8b' });
  78. Codicon.symbolObject = new Codicon('symbol-object', { fontCharacter: '\\ea8b' });
  79. Codicon.symbolMethod = new Codicon('symbol-method', { fontCharacter: '\\ea8c' });
  80. Codicon.symbolFunction = new Codicon('symbol-function', { fontCharacter: '\\ea8c' });
  81. Codicon.symbolConstructor = new Codicon('symbol-constructor', { fontCharacter: '\\ea8c' });
  82. Codicon.symbolBoolean = new Codicon('symbol-boolean', { fontCharacter: '\\ea8f' });
  83. Codicon.symbolNull = new Codicon('symbol-null', { fontCharacter: '\\ea8f' });
  84. Codicon.symbolNumber = new Codicon('symbol-number', { fontCharacter: '\\ea90' });
  85. Codicon.symbolStruct = new Codicon('symbol-struct', { fontCharacter: '\\ea91' });
  86. Codicon.symbolTypeParameter = new Codicon('symbol-type-parameter', { fontCharacter: '\\ea92' });
  87. Codicon.symbolKey = new Codicon('symbol-key', { fontCharacter: '\\ea93' });
  88. Codicon.symbolText = new Codicon('symbol-text', { fontCharacter: '\\ea93' });
  89. Codicon.symbolReference = new Codicon('symbol-reference', { fontCharacter: '\\ea94' });
  90. Codicon.symbolEnum = new Codicon('symbol-enum', { fontCharacter: '\\ea95' });
  91. Codicon.symbolValue = new Codicon('symbol-value', { fontCharacter: '\\ea95' });
  92. Codicon.symbolUnit = new Codicon('symbol-unit', { fontCharacter: '\\ea96' });
  93. Codicon.arrowDown = new Codicon('arrow-down', { fontCharacter: '\\ea9a' });
  94. Codicon.arrowLeft = new Codicon('arrow-left', { fontCharacter: '\\ea9b' });
  95. Codicon.arrowUp = new Codicon('arrow-up', { fontCharacter: '\\eaa1' });
  96. Codicon.caseSensitive = new Codicon('case-sensitive', { fontCharacter: '\\eab1' });
  97. Codicon.check = new Codicon('check', { fontCharacter: '\\eab2' });
  98. Codicon.chevronDown = new Codicon('chevron-down', { fontCharacter: '\\eab4' });
  99. Codicon.chevronRight = new Codicon('chevron-right', { fontCharacter: '\\eab6' });
  100. Codicon.chevronUp = new Codicon('chevron-up', { fontCharacter: '\\eab7' });
  101. Codicon.lightbulbAutofix = new Codicon('lightbulb-autofix', { fontCharacter: '\\eb13' });
  102. Codicon.loading = new Codicon('loading', { fontCharacter: '\\eb19' });
  103. Codicon.preserveCase = new Codicon('preserve-case', { fontCharacter: '\\eb2e' });
  104. Codicon.regex = new Codicon('regex', { fontCharacter: '\\eb38' });
  105. Codicon.remove = new Codicon('remove', { fontCharacter: '\\eb3b' });
  106. Codicon.replaceAll = new Codicon('replace-all', { fontCharacter: '\\eb3c' });
  107. Codicon.replace = new Codicon('replace', { fontCharacter: '\\eb3d' });
  108. Codicon.splitHorizontal = new Codicon('split-horizontal', { fontCharacter: '\\eb56' });
  109. Codicon.splitVertical = new Codicon('split-vertical', { fontCharacter: '\\eb57' });
  110. Codicon.symbolClass = new Codicon('symbol-class', { fontCharacter: '\\eb5b' });
  111. Codicon.symbolColor = new Codicon('symbol-color', { fontCharacter: '\\eb5c' });
  112. Codicon.symbolConstant = new Codicon('symbol-constant', { fontCharacter: '\\eb5d' });
  113. Codicon.symbolEnumMember = new Codicon('symbol-enum-member', { fontCharacter: '\\eb5e' });
  114. Codicon.symbolField = new Codicon('symbol-field', { fontCharacter: '\\eb5f' });
  115. Codicon.symbolFile = new Codicon('symbol-file', { fontCharacter: '\\eb60' });
  116. Codicon.symbolInterface = new Codicon('symbol-interface', { fontCharacter: '\\eb61' });
  117. Codicon.symbolKeyword = new Codicon('symbol-keyword', { fontCharacter: '\\eb62' });
  118. Codicon.symbolOperator = new Codicon('symbol-operator', { fontCharacter: '\\eb64' });
  119. Codicon.symbolProperty = new Codicon('symbol-property', { fontCharacter: '\\eb65' });
  120. Codicon.symbolSnippet = new Codicon('symbol-snippet', { fontCharacter: '\\eb66' });
  121. Codicon.triangleDown = new Codicon('triangle-down', { fontCharacter: '\\eb6e' });
  122. Codicon.triangleLeft = new Codicon('triangle-left', { fontCharacter: '\\eb6f' });
  123. Codicon.triangleRight = new Codicon('triangle-right', { fontCharacter: '\\eb70' });
  124. Codicon.triangleUp = new Codicon('triangle-up', { fontCharacter: '\\eb71' });
  125. Codicon.wholeWord = new Codicon('whole-word', { fontCharacter: '\\eb7e' });
  126. Codicon.listFilter = new Codicon('list-filter', { fontCharacter: '\\eb83' });
  127. Codicon.listSelection = new Codicon('list-selection', { fontCharacter: '\\eb85' });
  128. Codicon.selection = new Codicon('selection', { fontCharacter: '\\eb85' });
  129. Codicon.symbolString = new Codicon('symbol-string', { fontCharacter: '\\eb8d' });
  130. Codicon.treeItemExpanded = new Codicon('tree-item-expanded', Codicon.chevronDown.definition); // collapsed is done with rotation
  131. Codicon.treeFilterOnTypeOn = new Codicon('tree-filter-on-type-on', Codicon.listFilter.definition);
  132. Codicon.treeFilterOnTypeOff = new Codicon('tree-filter-on-type-off', Codicon.listSelection.definition);
  133. Codicon.treeFilterClear = new Codicon('tree-filter-clear', Codicon.close.definition);
  134. Codicon.treeItemLoading = new Codicon('tree-item-loading', Codicon.loading.definition);
  135. Codicon.menuSelection = new Codicon('menu-selection', Codicon.check.definition);
  136. Codicon.menuSubmenu = new Codicon('menu-submenu', Codicon.chevronRight.definition);
  137. Codicon.scrollbarButtonLeft = new Codicon('scrollbar-button-left', Codicon.triangleLeft.definition);
  138. Codicon.scrollbarButtonRight = new Codicon('scrollbar-button-right', Codicon.triangleRight.definition);
  139. Codicon.scrollbarButtonUp = new Codicon('scrollbar-button-up', Codicon.triangleUp.definition);
  140. Codicon.scrollbarButtonDown = new Codicon('scrollbar-button-down', Codicon.triangleDown.definition);
  141. Codicon.quickInputBack = new Codicon('quick-input-back', Codicon.arrowLeft.definition);
  142. export var CSSIcon;
  143. (function (CSSIcon) {
  144. CSSIcon.iconNameSegment = '[A-Za-z0-9]+';
  145. CSSIcon.iconNameExpression = '[A-Za-z0-9-]+';
  146. CSSIcon.iconModifierExpression = '~[A-Za-z]+';
  147. CSSIcon.iconNameCharacter = '[A-Za-z0-9~-]';
  148. const cssIconIdRegex = new RegExp(`^(${CSSIcon.iconNameExpression})(${CSSIcon.iconModifierExpression})?$`);
  149. function asClassNameArray(icon) {
  150. if (icon instanceof Codicon) {
  151. return ['codicon', 'codicon-' + icon.id];
  152. }
  153. const match = cssIconIdRegex.exec(icon.id);
  154. if (!match) {
  155. return asClassNameArray(Codicon.error);
  156. }
  157. let [, id, modifier] = match;
  158. const classNames = ['codicon', 'codicon-' + id];
  159. if (modifier) {
  160. classNames.push('codicon-modifier-' + modifier.substr(1));
  161. }
  162. return classNames;
  163. }
  164. CSSIcon.asClassNameArray = asClassNameArray;
  165. function asClassName(icon) {
  166. return asClassNameArray(icon).join(' ');
  167. }
  168. CSSIcon.asClassName = asClassName;
  169. function asCSSSelector(icon) {
  170. return '.' + asClassNameArray(icon).join('.');
  171. }
  172. CSSIcon.asCSSSelector = asCSSSelector;
  173. })(CSSIcon || (CSSIcon = {}));