docs: Support icon keyword search in the icons “Browse” tab (#1629)

site/src/App/routes/foundations/iconography/IconsBrowse.tsx

@@ -11,14 +11,16 @@ import {
   Strong,
 } from 'braid-src/lib/components';
 import { Overlay } from 'braid-src/lib/components/private/Overlay/Overlay';
+import { iconsKeywords } from './iconsKeywords';
 import * as icons from 'braid-src/lib/components/icons';
 import * as styles from './IconsBrowse.css';
 
-type IconName = keyof typeof icons;
+export type IconName = keyof typeof icons;
 
 const iconNames = Object.keys(icons).map((icon) => ({
   name: icon as IconName,
   displayName: icon.replace(/^Icon/, ''),
+  keywords: iconsKeywords[icon as IconName],
 }));
 
 const IconTile = ({
@@ -90,9 +92,10 @@ export const IconsBrowse = () => {
 
             setSearchTerm(searchText);
             const filteredList = iconNames.filter(
-              ({ name }) =>
+              ({ name, keywords }) =>
                 searchText.length === 0 ||
-                name.toLowerCase().indexOf(searchText.toLowerCase()) > -1,
+                name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 ||
+                keywords.some((keyword) => keyword.startsWith(searchText)),
             );
 
             if (filteredList.length === 0) {

site/src/App/routes/foundations/iconography/iconsKeywords.ts

@@ -0,0 +1,171 @@
+import type { IconName } from './IconsBrowse';
+
+type NonEmptyArray<T> = [T, ...T[]];
+
+// Todo - automatically clear keywords array when relevant icon svg is changed
+export const iconsKeywords: Record<IconName, NonEmptyArray<string>> = {
+  IconAI: ['gpt', 'artificial', 'smart', 'sparkle', 'stars'],
+  IconAdd: ['plus'],
+  IconArrow: ['up', 'down', 'left', 'right'],
+  IconAttachment: ['paperclip', 'clip', 'file'],
+  IconBookmark: ['save', 'ribbon'],
+  IconCareer: ['job', 'work', 'compass', 'safari'],
+  IconCategory: ['shapes'],
+  IconCaution: ['alert', 'warning', '!'],
+  IconChevron: ['down'],
+  IconClear: ['cross', 'delete', 'remove', 'x'],
+  IconCompany: ['business', 'building', 'enterprise'],
+  IconCompose: ['edit', 'pencil', 'paper'],
+  IconCopy: ['duplicate', 'clone', 'window'],
+  IconCreditCard: ['credit', 'card', 'debit', 'payment', 'bank'],
+  IconCritical: ['alert', 'warning', 'error', '!'],
+  IconDate: ['calendar', 'day', 'month', 'year'],
+  IconDelete: ['remove', 'trash', 'bin', 'x'],
+  IconDesktop: ['computer', 'pc', 'monitor', 'screen'],
+  IconDocument: ['paper', 'file'],
+  IconDocumentBroken: ['paper', 'file', 'broken'],
+  IconDownload: ['arrow', 'down', 'save', 'export'],
+  IconEdit: ['pencil', 'paper', 'pen'],
+  IconEducation: ['book', 'learning', 'study', 'read'],
+  IconEnlarge: ['expand', 'fullscreen', 'arrows', 'arrow', 'big'],
+  IconExperience: ['diamond', 'gem', 'special'],
+  IconFilter: ['funnel', 'sort', 'sliders', 'adjust'],
+  IconFlag: ['location', 'marker', 'pin'],
+  IconGift: ['present', 'box', 'surprise'],
+  IconGlobe: ['world', 'map', 'earth', 'planet'],
+  IconGrid: ['layout', 'table', 'box', 'boxes'],
+  IconHash: ['tag', 'pound', '#'],
+  IconHeart: ['love', 'like'],
+  IconHelp: ['question', 'about', '?'],
+  IconHistory: ['time', 'clock', 'past', 'back', 'rewind'],
+  IconHome: ['house', 'building'],
+  IconImage: [
+    'picture',
+    'photo',
+    'camera',
+    'background',
+    'wallpaper',
+    'landscape',
+  ],
+  IconInfo: ['information', 'i', 'circle'],
+  IconInvoice: ['bill', 'payment', 'receipt'],
+  IconLanguage: ['translate', 'letters'],
+  IconLink: ['chain'],
+  IconLinkBroken: ['brokenlink', 'chain', 'broken', 'error'],
+  IconList: ['lines', 'queue', 'stack'],
+  IconLocation: ['pin', 'marker', 'place', 'map', 'gps'],
+  IconMail: ['envelope', 'letter', 'message'],
+  IconMessage: ['chat', 'bubble', 'comment'],
+  IconMinus: ['remove', 'delete', 'subtract', '-'],
+  IconMobile: ['phone', 'cellphone', 'device', 'iphone', 'android'],
+  IconMoney: [
+    'cash',
+    'dollar',
+    'bill',
+    'payment',
+    'bank',
+    '$',
+    'note',
+    'currency',
+  ],
+  IconNewWindow: ['window', 'open', 'external', 'link'],
+  IconNote: ['paper', 'document', 'file'],
+  IconNotification: ['alert', 'warning', 'bell', 'ring', 'alarm'],
+  IconOverflow: ['more', 'dots', 'menu'],
+  IconPeople: ['users', 'group', 'team'],
+  IconPersonAdd: ['person', 'user', 'add', 'add person', 'plus'],
+  IconPersonVerified: ['person', 'user', 'verified', 'check', 'tick', 'shield'],
+  IconPhone: ['call', 'telephone', 'mobile', 'home', 'landline'],
+  IconPlatformAndroid: ['platform', 'android', 'google', 'mobile', 'phone'],
+  IconPlatformApple: [
+    'platform',
+    'apple',
+    'ios',
+    'iphone',
+    'ipad',
+    'mac',
+    'mobile',
+    'phone',
+  ],
+  IconPositive: [
+    'tick',
+    'check',
+    'success',
+    'done',
+    'complete',
+    'correct',
+    'alert',
+  ],
+  IconPrint: ['paper', 'document', 'file'],
+  IconProfile: ['person', 'user', 'account'],
+  IconPromote: ['announcement', 'stars', 'highlight', 'alert'],
+  IconRecommended: ['star', 'favourite', 'like', 'love', 'badge'],
+  IconRefresh: ['reload', 'sync', 'update'],
+  IconResume: ['cv', 'curriculum vitae', 'paper', 'document'],
+  IconRocket: ['launch', 'blast', 'space', 'ship'],
+  IconSearch: ['magnifying glass', 'magnify', 'find', 'look'],
+  IconSecurity: ['lock', 'protection', 'safe', 'secure'],
+  IconSend: ['paper', 'plane', 'airmail', 'mail', 'message'],
+  IconSent: ['reply', 'arrow'],
+  IconSentiment: [
+    'smiley',
+    'face',
+    'emoji',
+    'mood',
+    'negative',
+    'neutral',
+    'positive',
+  ],
+  IconSettings: ['cog', 'gear', 'preferences', 'options'],
+  IconShare: ['arrow', 'up', 'forward', 'send'],
+  IconSkills: ['lightning', 'bolt', 'flash'],
+  IconSocialFacebook: ['social', 'facebook', 'network'],
+  IconSocialGitHub: ['social', 'github', 'network', 'git', 'code'],
+  IconSocialInstagram: ['social', 'instagram', 'network'],
+  IconSocialLinkedIn: ['social', 'linkedin', 'network'],
+  IconSocialMedium: ['social', 'medium', 'network', 'blog', 'article'],
+  IconSocialX: ['social', 'twitter', 'network', 'x'],
+  IconSocialYouTube: ['social', 'youtube', 'network', 'video', 'google'],
+  IconSort: [
+    'order',
+    'filter',
+    'funnel',
+    'sliders',
+    'adjust',
+    'arrow',
+    'up',
+    'down',
+    'arrange',
+  ],
+  IconStar: ['favourite', 'like', 'love', 'badge'],
+  IconStatistics: [
+    'chart',
+    'graph',
+    'analytics',
+    'data',
+    'trend',
+    'up',
+    'increase',
+  ],
+  IconSubCategory: ['category', 'folder', 'directory', 'arrow', 'sub'],
+  IconTag: ['label'],
+  IconThumb: [
+    'up',
+    'like',
+    'love',
+    'positive',
+    'success',
+    'done',
+    'complete',
+    'correct',
+  ],
+  IconTick: ['check', 'success', 'done', 'complete', 'correct'],
+  IconTime: ['clock', 'past', 'back', 'rewind'],
+  IconTip: ['lightbulb', 'idea'],
+  IconUpload: ['arrow', 'up', 'forward', 'send'],
+  IconVideo: ['camera', 'movie', 'film', 'play'],
+  IconVisibility: ['eye', 'show', 'hide'],
+  IconWorkExperience: ['work', 'experience', 'briefcase', 'case', 'bag'],
+  IconZoomIn: ['zoom', 'in', 'magnify', 'find', 'look', '+'],
+  IconZoomOut: ['zoom', 'out', 'magnify', 'find', 'look', '-'],
+};