mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(icons): correctly render icon imports in examples (#1273)

Browse source 
Fixes #1272
This commit is contained in:
metonym 2022-04-29 07:12:32 -07:00 • committed by GitHub
commit 3f466bc9bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/src/pages/components/Button.svx
View file

@ -2,9 +2,6 @@
import { InlineNotification, Button } from "carbon-components-svelte"; import { InlineNotification, Button } from "carbon-components-svelte";
import Add from "carbon-icons-svelte/lib/Add.svelte"; import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan from "carbon-icons-svelte/lib/TrashCan.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 Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";

16
docs/svelte.config.js
View file

@ -5,16 +5,25 @@ const slug = require("remark-slug");
const visit = require("unist-util-visit"); const visit = require("unist-util-visit");
const { format } = require("prettier"); const { format } = require("prettier");
const pkg = require("../package.json"); const pkg = require("../package.json");
const component_api = require("./src/COMPONENT_API.json");
const fs = require("fs"); const fs = require("fs");
const Prism = require("prismjs"); const Prism = require("prismjs");
require("prism-svelte"); require("prism-svelte");
const component_api_by_name = component_api.components.reduce((a, c) => {
return {
...a,
[c.moduleName]: true,
};
}, {});
function createImports(source) { function createImports(source) {
const inlineComponents = new Set(); const inlineComponents = new Set();
const icons = new Set(); const icons = new Set();
// TODO: [refactor] better determine if component is a Carbon icon // heuristic to guess if the inline component or expression name is a Carbon icon
const isIcon = (text) => text.match(/(16|20|24|32)/); const isIcon = (text) =>
/[A-Z][a-z]*/.test(text) && !(text in component_api_by_name);
walk(parse(source), { walk(parse(source), {
enter(node) { enter(node) {
@ -48,7 +57,8 @@ function createImports(source) {
icons.size > 0 icons.size > 0
? icon_imports ? icon_imports
.map( .map(
(icon) => `import ${icon} from "carbon-icons-svelte/lib/${icon}";` (icon) =>
`import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";`
) )
.join("\n") .join("\n")
: "" : ""