From 3f466bc9bc966daa800460b8d0370c5db5b62959 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Fri, 29 Apr 2022 07:12:32 -0700
Subject: [PATCH] docs(icons): correctly render icon imports in examples
 (#1273)

Fixes #1272
---
 docs/src/pages/components/Button.svx |  3 ---
 docs/svelte.config.js                | 16 +++++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 933720b0..30effdca 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -2,9 +2,6 @@
   import { InlineNotification, Button } from "carbon-components-svelte";
   import Add from "carbon-icons-svelte/lib/Add.svelte";
   import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
-  import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
-  import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
-  import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
   import Login from "carbon-icons-svelte/lib/Login.svelte";
   import Preview from "../../components/Preview.svelte";
 
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index 64122ac3..28d2ea0c 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -5,16 +5,25 @@ const slug = require("remark-slug");
 const visit = require("unist-util-visit");
 const { format } = require("prettier");
 const pkg = require("../package.json");
+const component_api = require("./src/COMPONENT_API.json");
 const fs = require("fs");
 const Prism = require("prismjs");
 require("prism-svelte");
 
+const component_api_by_name = component_api.components.reduce((a, c) => {
+  return {
+    ...a,
+    [c.moduleName]: true,
+  };
+}, {});
+
 function createImports(source) {
   const inlineComponents = new Set();
   const icons = new Set();
 
-  // TODO: [refactor] better determine if component is a Carbon icon
-  const isIcon = (text) => text.match(/(16|20|24|32)/);
+  // heuristic to guess if the inline component or expression name is a Carbon icon
+  const isIcon = (text) =>
+    /[A-Z][a-z]*/.test(text) && !(text in component_api_by_name);
 
   walk(parse(source), {
     enter(node) {
@@ -48,7 +57,8 @@ function createImports(source) {
       icons.size > 0
         ? icon_imports
             .map(
-              (icon) => `import ${icon} from "carbon-icons-svelte/lib/${icon}";`
+              (icon) =>
+                `import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";`
             )
             .join("\n")
         : ""