scb-wc 0.1.41 → 0.1.42

package/README.md

@@ -1,6 +1,9 @@
-# Om SCB Web Components
+# Om SCB Web Components Preview
 
-SCB Web Components finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
+> ⚠️ **Previewkanal**  
+> Installera `scb-wc` via `@next` för komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.
+
+SCB Web Components preview finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
 
 Komponenterna bygger på:
 - [Lit](https://lit.dev/)
@@ -8,54 +11,32 @@ Komponenterna bygger på:
 
 ## Storybook och dokumentation (internt)
 
-Produktionskomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna adress:
+Previewkomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna testadress:
 
-- Prod: https://webcomponents.scb.intra
+- Test: <https://webcomponentstest.scb.intra>
 
-Testkomponenterna finns på:
+Den publika/stabila Storybooken finns på:
 
-- Test: https://webcomponentstest.scb.intra
+- Prod: <https://webcomponents.scb.intra>
 
 ---
 
 ## Kom igång
 
-Rekommenderad startväg:
-
-```sh
-npx scb-wc init html my-app
-npx scb-wc init html-service my-service
-npx scb-wc init react my-react-app
-npx scb-wc init react-service my-react-service
-npx scb-wc init blazor my-blazor-app
-npx scb-wc init blazor-service my-blazor-service
-```
-
-Webbplatsmallarna skapar en liten starterapp med:
-- `scb-header`
-- `scb-footer`
-- `scb-grid`
-- några vanliga komponenter
+> **Obs:** Kör alla kommandon i mappen där din `package.json` ligger.  
+> Har du ingen? Kör `npm init -y` i projektroten (eller annan lämplig mapp).
 
-Webbtjänstmallarna skapar en starterapp med:
-- `scb-app-bar`
-- `scb-search`
-- `scb-table-advanced`
-- komponenter för actions och status
-
-Välj sedan den starter som ligger närmast din app och kör `npm install` i den nya mappen.
-
-Om du redan har en app med `package.json`, kör kommandon i den mappen och installera paketet:
+Installera previewkanalen:
 
 ```sh
-npm install scb-wc
+npm install scb-wc@next
 ```
 
 ---
 
 ## Alternativ 1: Använd som ES‑moduler (t.ex. i React, Vue, SPA)
 
-Importera CSS och de komponenter du använder (bäst för tree‑shaking):
+Importera CSS och de testkomponenter du använder (bäst för tree‑shaking):
 
 ```js
 // Global CSS + tokens (måste bara importeras en gång)
@@ -87,11 +68,27 @@ import 'scb-wc/scb-wc-selfhost.css';
 
 Då används paketets egna fontfiler under `node_modules/scb-wc/fonts/`.
 
+### Optimera Material Symbols med eget ikon-subset
+
+Vill du selfhosta bara de Material Symbols-ikoner din app använder kan du generera en liten ikonfont i din app:
+
+```sh
+npx scb-wc subset-icons --icons ./src/scb-icons.json --out ./public/scb-icons
+```
+
+Om `--icons` utelämnas används paketets standardlista `icons.json`. Kommandot skapar `scb-wc-icons.css`, en lokal fontfil och en kopia av ikonlistan i målmappen. Ladda då den fontlösa bas-CSS:en plus den genererade ikon-CSS:en:
+
+```js
+import 'scb-wc/scb-wc-core.css';
+import '/scb-icons/scb-wc-icons.css';
+import 'scb-wc/scb-typography.css';
+```
+
 ---
 
 ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
 
-Det här läget använder den färdig‑splittrade **MVC‑ESM**‑builden som följer med paketet under:
+Det här läget använder den färdig‑splittade **MVC‑ESM**‑builden som följer med paketet under:
 
 ```text
 node_modules/scb-wc/mvc/
@@ -104,7 +101,7 @@ Lägg till i din apps `package.json`:
 ```jsonc
 {
   "scripts": {
-    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
+    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
   }
 }
 ```
@@ -151,7 +148,7 @@ Behöver du en annan webbrotsökväg (t.ex. om din `wwwroot` ligger någon annan
 
 ## Alternativ 3: Bundlad version (IIFE) för äldre miljöer
 
-Om ESM inte stöds kan du använda den bundlade varianten från paketroten.  
+Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.  
 Flytta följande tre filer från `node_modules/scb-wc` och använd dem i applikationen:
 
 ```text
@@ -174,7 +171,7 @@ node_modules/scb-wc/scb-typography.css
 
 SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.
 
-Grundprincipen är:
+Grundprincipen är samma som för `scb-wc`:
 
 1. Använd MVC‑ESM‑builden (`node_modules/scb-wc/mvc`) och kopiera den till `wwwroot/ui` med `ui:install`.
 2. Ladda `scb-blazor-bridge.js` från `wwwroot/ui` i din Blazor‑layout.
@@ -187,8 +184,8 @@ Lägg till ett script som kopierar interop-filen från `node_modules` till ditt
 ```jsonc
 {
   "scripts": {
-    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
-    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const src=p.resolve('node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
+    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
+    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const src=p.resolve('node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
   }
 }
 ```
@@ -202,13 +199,13 @@ Exempel på layout:
 <script type="module" src="~/ui/scb-blazor-bridge.js"></script>
 ```
 
-`ScbBlazorInteropBase` kan återanvändas mellan projekt som använder både `scb-wc@latest` och `scb-wc@next`.
+`ScbBlazorInteropBase` är samma bas‑klass i preview- och public-kanalen. Du kan därför dela samma C#‑fil mellan projekt som använder `scb-wc@next` och `scb-wc@latest`.
 
 ---
 
 ## Viktigt
 
-- `scb-wc@latest` är produktionskanalen. Använd `scb-wc@next` för komponenter under utveckling och experiment.  
+- `scb-wc@next` är **previewkanalen**. Komponenter kan ändras eller tas bort mellan versioner. Använd `scb-wc@latest` i externa produktionsmiljöer.  
 - **Kör kommandon i mappen med din `package.json`.** Placeringen av `package.json` styr standardmål för `ui:install` (rot → `wwwroot/ui`, `ClientApp/` → använd `--ui_wwwroot=../wwwroot`).  
 - **Blanda inte MVC‑ESM och IIFE på samma sida.** Välj en distributionsform per sida/app.  
 - **Blazor:** Se till att `scb-blazor-bridge.js` laddas efter att komponent‑JS:et finns på sidan, och att `ScbBlazorInteropBase` inte dupliceras i flera namespaces i samma lösning.

package/all.js

@@ -17,9 +17,11 @@ import './scb-card/scb-list-card.js';
 import './scb-card/scb-social-card.js';
 import './scb-checkbox/scb-checkbox-group.js';
 import './scb-checkbox/scb-checkbox.js';
+import './scb-chevron/scb-chevron.js';
 import './scb-chip/scb-chip.js';
 import './scb-collapse/scb-collapse.js';
 import './scb-cookies-consent/scb-cookies-consent.js';
+import './scb-datepicker/scb-datepicker.js';
 import './scb-dialog/scb-dialog.js';
 import './scb-divider/scb-divider.js';
 import './scb-drawer/scb-drawer.js';

package/bin/scb-wc.mjs

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 
 import fs from 'node:fs';
+import http from 'node:http';
+import https from 'node:https';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -10,7 +12,30 @@ const packageRoot = path.resolve(__dirname, '..');
 const packageJson = JSON.parse(fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf8'));
 const starterRoot = path.join(packageRoot, 'starters');
 const templates = new Set(['html', 'html-service', 'react', 'react-service', 'blazor', 'blazor-service']);
-const usage = 'npx scb-wc init <html|html-service|react|react-service|blazor|blazor-service> [mapp]';
+const usage = [
+  'npx scb-wc init <html|html-service|react|react-service|blazor|blazor-service> [mapp]',
+  'npx scb-wc subset-icons [--icons icons.json] [--out public/scb-icons] [--css-file scb-wc-icons.css]',
+].join('\n');
+
+const defaultSubsetOutDir = 'public/scb-icons';
+const defaultSubsetCssFile = 'scb-wc-icons.css';
+const defaultSubsetFontBase = 'material-symbols-outlined-subset';
+const materialSymbolsCssUrl = 'https://fonts.googleapis.com/css2';
+const materialSymbolsFamilyQuery = 'Material Symbols Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
+const requiredIconNames = [
+  'arrow_back',
+  'arrow_forward',
+  'check',
+  'chevron_left',
+  'chevron_right',
+  'close',
+  'expand_less',
+  'expand_more',
+  'keyboard_arrow_down',
+  'keyboard_arrow_up',
+  'menu',
+  'search',
+];
 
 function fail(message) {
   console.error(message);
@@ -66,8 +91,256 @@ function copyStarter(sourceDir, targetDir, targetName) {
   }
 }
 
+function parseFlags(args) {
+  const flags = {};
+
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+
+    if (!arg.startsWith('--')) {
+      fail(`Okänt argument: ${arg}`);
+    }
+
+    const [rawKey, inlineValue] = arg.slice(2).split(/=(.*)/s, 2);
+    const key = rawKey.trim();
+
+    if (!key) {
+      fail(`Ogiltigt argument: ${arg}`);
+    }
+
+    if (key === 'dry-run' || key === 'help') {
+      flags[key] = true;
+      continue;
+    }
+
+    const value = inlineValue ?? args[index + 1];
+    if (!value || value.startsWith('--')) {
+      fail(`Saknar värde för --${key}.`);
+    }
+
+    flags[key] = value;
+    if (inlineValue === undefined) {
+      index += 1;
+    }
+  }
+
+  return flags;
+}
+
+function resolveDefaultIconsPath() {
+  const candidates = [
+    path.join(packageRoot, 'icons.json'),
+    path.join(packageRoot, 'scripts', 'icons.json'),
+  ];
+
+  return candidates.find((candidate) => fs.existsSync(candidate));
+}
+
+function readIconList(iconsPath) {
+  if (!iconsPath) {
+    fail('Saknar standardlista for ikoner.');
+  }
+
+  const absolutePath = path.resolve(process.cwd(), iconsPath);
+  if (!fs.existsSync(absolutePath)) {
+    fail(`Hittar inte ikonfilen: ${absolutePath}`);
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(fs.readFileSync(absolutePath, 'utf8'));
+  } catch (error) {
+    fail(`Kunde inte lasa ikonfilen ${absolutePath}: ${error.message}`);
+  }
+
+  const list = Array.isArray(parsed) ? parsed : parsed?.icons;
+  if (!Array.isArray(list)) {
+    fail('Ikonfilen ska vara en JSON-array eller ett objekt med egenskapen "icons".');
+  }
+
+  return list.map((icon) => String(icon ?? '').trim()).filter(Boolean);
+}
+
+function normalizeIconNames(iconNames) {
+  const normalized = Array.from(new Set([...requiredIconNames, ...iconNames]))
+    .map((icon) => icon.trim())
+    .filter(Boolean)
+    .sort((a, b) => a.localeCompare(b));
+
+  const invalid = normalized.filter((icon) => !/^[a-z0-9_]+$/.test(icon));
+  if (invalid.length) {
+    fail(`Ogiltiga ikon-namn: ${invalid.join(', ')}`);
+  }
+
+  return normalized;
+}
+
+function buildMaterialSymbolsUrl(iconNames, display) {
+  const params = new URLSearchParams({
+    family: materialSymbolsFamilyQuery,
+    icon_names: iconNames.join(','),
+    display,
+  });
+  return `${materialSymbolsCssUrl}?${params.toString()}`;
+}
+
+function requestUrl(url, redirects = 5) {
+  return new Promise((resolve, reject) => {
+    const client = url.startsWith('http:') ? http : https;
+    const request = client.get(
+      url,
+      {
+        headers: {
+          'User-Agent': `${packageJson.name}/${packageJson.version} subset-icons`,
+        },
+      },
+      (response) => {
+        const statusCode = response.statusCode ?? 0;
+        const location = response.headers.location;
+
+        if ([301, 302, 303, 307, 308].includes(statusCode) && location) {
+          response.resume();
+          if (redirects <= 0) {
+            reject(new Error(`For manga redirects for ${url}`));
+            return;
+          }
+          resolve(requestUrl(new URL(location, url).href, redirects - 1));
+          return;
+        }
+
+        if (statusCode < 200 || statusCode >= 300) {
+          response.resume();
+          reject(new Error(`HTTP ${statusCode} for ${url}`));
+          return;
+        }
+
+        const chunks = [];
+        response.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+        response.on('end', () => {
+          resolve({
+            buffer: Buffer.concat(chunks),
+            contentType: response.headers['content-type'] ?? '',
+          });
+        });
+      },
+    );
+
+    request.on('error', reject);
+  });
+}
+
+async function fetchText(url) {
+  const { buffer } = await requestUrl(url);
+  return buffer.toString('utf8');
+}
+
+async function fetchBuffer(url) {
+  const { buffer } = await requestUrl(url);
+  return buffer;
+}
+
+function fontExtensionForFormat(format) {
+  switch (format) {
+    case 'woff2':
+      return 'woff2';
+    case 'woff':
+      return 'woff';
+    case 'opentype':
+      return 'otf';
+    case 'truetype':
+    default:
+      return 'ttf';
+  }
+}
+
+function findFontSources(cssText) {
+  const matches = Array.from(
+    cssText.matchAll(/url\((https:\/\/fonts\.gstatic\.com\/[^)]+)\)\s*format\(['"]([^'"]+)['"]\)/g),
+  );
+
+  return matches.map((match) => ({
+    url: match[1],
+    format: match[2],
+  }));
+}
+
+async function writeSubsetFiles({ cssText, iconNames, outDir, cssFile }) {
+  const sources = findFontSources(cssText);
+  if (!sources.length) {
+    fail('Google Fonts-svaret innehöll inga fontfiler att ladda ner.');
+  }
+
+  fs.mkdirSync(outDir, { recursive: true });
+
+  let localCss = cssText;
+  for (const [index, source] of sources.entries()) {
+    const ext = fontExtensionForFormat(source.format);
+    const suffix = sources.length > 1 ? `-${index + 1}` : '';
+    const fileName = `${defaultSubsetFontBase}${suffix}.${ext}`;
+    const fontBuffer = await fetchBuffer(source.url);
+    fs.writeFileSync(path.join(outDir, fileName), fontBuffer);
+    localCss = localCss.split(source.url).join(`./${fileName}`);
+  }
+
+  const header = [
+    '/* Generated by `npx scb-wc subset-icons`. */',
+    `/* Icons: ${iconNames.join(', ')} */`,
+    '',
+  ].join('\n');
+
+  fs.writeFileSync(path.join(outDir, cssFile), `${header}${localCss.trim()}\n`, 'utf8');
+  fs.writeFileSync(path.join(outDir, 'icons.json'), `${JSON.stringify(iconNames, null, 2)}\n`, 'utf8');
+}
+
+async function runSubsetIcons(args) {
+  const flags = parseFlags(args);
+  if (flags.help) {
+    console.log(usage);
+    return;
+  }
+
+  const iconsPath = flags.icons ?? resolveDefaultIconsPath();
+  const outDir = path.resolve(process.cwd(), flags.out ?? defaultSubsetOutDir);
+  const cssFile = flags['css-file'] ?? defaultSubsetCssFile;
+  const display = flags.display ?? 'swap';
+
+  if (!/^[a-z0-9._-]+\.css$/i.test(cssFile)) {
+    fail('--css-file måste vara ett css-filnamn, till exempel scb-wc-icons.css.');
+  }
+
+  if (!['auto', 'block', 'swap', 'fallback', 'optional'].includes(display)) {
+    fail('--display måste vara auto, block, swap, fallback eller optional.');
+  }
+
+  const iconNames = normalizeIconNames(readIconList(iconsPath));
+  const cssUrl = buildMaterialSymbolsUrl(iconNames, display);
+
+  if (flags['dry-run']) {
+    console.log(`Skulle skapa Material Symbols-subset med ${iconNames.length} ikoner.`);
+    console.log(`Källa: ${path.resolve(process.cwd(), iconsPath)}`);
+    console.log(`Mål: ${outDir}`);
+    console.log(`CSS: ${cssFile}`);
+    return;
+  }
+
+  const cssText = await fetchText(cssUrl);
+  await writeSubsetFiles({ cssText, iconNames, outDir, cssFile });
+  console.log(`Skapade ikon-subset med ${iconNames.length} ikoner i ${outDir}`);
+  console.log(`Ladda CSS-filen: ${path.join(outDir, cssFile)}`);
+}
+
 const [, , command, template, targetArg] = process.argv;
 
+if (!command || command === '--help' || command === 'help') {
+  console.log(usage);
+  process.exit(0);
+}
+
+if (command === 'subset-icons') {
+  await runSubsetIcons(process.argv.slice(3));
+  process.exit(0);
+}
+
 if (command !== 'init') {
   fail('Okänt kommando.');
 }

package/icons.json

@@ -0,0 +1,178 @@
+[
+"add",
+"remove",
+"add_circle",
+"remove_circle",
+"expand_more",
+"expand_less",
+"chevron_right",
+"chevron_left",
+"unfold_more",
+"unfold_less",
+"info",
+"warning",
+"menu",
+"code",
+"more_horiz",
+"more_vert",
+"check_circle",
+"check",
+"check_small",
+"close",
+"border_color",
+"error",
+"edit",
+"edit_square",
+"refresh",
+"print",
+"group",
+"person_add",
+"person",
+"download",
+"mobile_arrow_down",
+"upload",
+"mail",
+"calendar_month",
+"calendar_today",
+"volume_up",
+"description",
+"folder",
+"play_arrow",
+"grain",
+"check_box",
+"help",
+"check_box_outline_blank",
+"indeterminate_check_box",
+"radio_button_checked",
+"radio_button_unchecked",
+"face",
+"male",
+"female",
+"grid_on",
+"label",
+"delete",
+"pin",
+"location_on",
+"straighten",
+"compare_arrows",
+"swap_horiz",
+"filter_vintage",
+"deceased",
+"apartment",
+"eco",
+"texture",
+"table_chart",
+"bar_chart",
+"bid_landscape",
+"show_chart",
+"ssid_chart",
+"bubble_chart",
+"touch_app",
+"near_me",
+"toggle_off",
+"toggle_on",
+"cancel",
+"book",
+"public",
+"style",
+"restore",
+"payment",
+"shopping_cart",
+"list",
+"ballot",
+"list_alt",
+"view_list",
+"format_list_bulleted",
+"database",
+"database_search",
+"data_table",
+"share",
+"home",
+"arrow_back",
+"arrow_forward",
+"arrow_upward",
+"arrow_downward",
+"arrow_outward",
+"call_made",
+"arrow_back_ios",
+"arrow_forward_ios",
+"favorite",
+"filter_list",
+"sort",
+"view_module",
+"hearing",
+"event_note",
+"image",
+"language",
+"repeat",
+"insert_chart",
+"insert_chart_filled",
+"leaderboard",
+"article",
+"reorder",
+"subject",
+"visibility",
+"visibility_off",
+"arrow_right",
+"arrow_drop_down",
+"tune",
+"settings",
+"manufacturing",
+"preview",
+"mic",
+"laptop_windows",
+"mobile",
+"tablet",
+"table",
+"sell",
+"shoppingmode",
+"lightbulb",
+"content_copy",
+"colors",
+"link",
+"format_bold",
+"format_color_text",
+"format_align_left",
+"fiber_manual_record",
+"breaking_news",
+"release_alert",
+"person_play",
+"comment",
+"mode_comment",
+"fullscreen",
+"fullscreen_exit",
+"filter_alt",
+"open_in_new",
+"search",
+"support",
+"location_searching",
+"explore",
+"assistant_direction",
+"mouse",
+"thumb_up",
+"checklist",
+"progress_activity",
+"reply",
+"percent",
+"space_bar",
+"graph_7",
+"verified",
+"deployed_code",
+"build",
+"code_blocks",
+"inventory",
+"save",
+"data_info_alert",
+"auto_stories",
+"menu_book",
+"book_2",
+"import_contacts",
+"nature",
+"spa",
+"contact_support",
+"work",
+"person_4",
+"price_change",
+"keyboard_arrow_down",
+"keyboard_arrow_up"
+]