├── .bun-version
├── .github
├── FUNDING.yml
└── workflows
│ ├── ci.yml
│ └── release.yml
├── docs
├── src
│ ├── constants.ts
│ ├── env.d.ts
│ ├── pages
│ │ └── index.astro
│ └── components
│ │ ├── LogoGithub.svelte
│ │ ├── Header.svelte
│ │ └── index.svelte
├── tsconfig.json
├── public
│ └── favicon.ico
├── package.json
└── astro.config.ts
├── .gitignore
├── tests
├── index.test.ts
├── test-types.ts
├── svelte@4
│ ├── package.json
│ ├── tsconfig.json
│ ├── Pictograms.svelte
│ └── bun.lock
├── svelte@5
│ ├── package.json
│ ├── tsconfig.json
│ ├── Pictograms.svelte
│ └── bun.lock
├── template.test.ts
└── __snapshots__
│ └── index.test.ts.snap
├── tsconfig.json
├── src
├── template.ts
├── global.d.ts
└── index.ts
├── SECURITY.md
├── package.json
├── CONTRIBUTING.md
├── README.md
├── bun.lock
├── LICENSE
├── CHANGELOG.md
└── PICTOGRAM_INDEX.md
/.bun-version:
--------------------------------------------------------------------------------
1 | 1.3.5
2 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: metonym
2 |
--------------------------------------------------------------------------------
/docs/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const VERSION = __VERSION;
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .astro
2 | .DS_Store
3 | node_modules
4 | dist
5 | lib
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "astro/tsconfigs/base"
3 | }
4 |
--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-pictograms-svelte/HEAD/docs/public/favicon.ico
--------------------------------------------------------------------------------
/docs/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | declare const __VERSION: string;
5 |
--------------------------------------------------------------------------------
/tests/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "bun:test";
2 | import { buildPictograms } from "../src/index.js";
3 |
4 | test("imports", async () => {
5 | const pictograms = await buildPictograms();
6 | expect(pictograms.length).toEqual(1520);
7 | expect(pictograms).toMatchSnapshot();
8 | });
9 |
--------------------------------------------------------------------------------
/tests/test-types.ts:
--------------------------------------------------------------------------------
1 | import { $ } from "bun";
2 |
3 | await $`bun link`;
4 |
5 | for await (const dir of $`find tests -maxdepth 1 -type d`.lines()) {
6 | if (dir && /svelte/.test(dir)) {
7 | await $`cd ${dir} && bun install`;
8 | await $`cd ${dir} && bun run test:types`;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/tests/svelte@4/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "test:types": "svelte-check"
6 | },
7 | "dependencies": {
8 | "carbon-pictograms-svelte": "link:carbon-pictograms-svelte"
9 | },
10 | "devDependencies": {
11 | "svelte": "^4.2.20",
12 | "svelte-check": "^4.3.2",
13 | "typescript": "^5.9.2"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tests/svelte@5/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "test:types": "svelte-check"
6 | },
7 | "dependencies": {
8 | "carbon-pictograms-svelte": "link:carbon-pictograms-svelte"
9 | },
10 | "devDependencies": {
11 | "svelte": "^5.39.5",
12 | "svelte-check": "^4.3.2",
13 | "typescript": "^5.9.2"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tests/svelte@4/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "noEmit": true,
4 | "forceConsistentCasingInFileNames": true,
5 | "verbatimModuleSyntax": true,
6 | "isolatedModules": true,
7 | "target": "ESNext",
8 | "module": "ESNext",
9 | "moduleResolution": "node",
10 | "noUnusedLocals": true,
11 | "noUnusedParameters": true,
12 | "strict": true,
13 | "skipLibCheck": true
14 | },
15 | "include": ["*.svelte"]
16 | }
17 |
--------------------------------------------------------------------------------
/tests/svelte@5/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "noEmit": true,
4 | "forceConsistentCasingInFileNames": true,
5 | "verbatimModuleSyntax": true,
6 | "isolatedModules": true,
7 | "target": "ESNext",
8 | "module": "ESNext",
9 | "moduleResolution": "node",
10 | "noUnusedLocals": true,
11 | "noUnusedParameters": true,
12 | "strict": true,
13 | "skipLibCheck": true
14 | },
15 | "include": ["*.svelte"]
16 | }
17 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "erasableSyntaxOnly": true,
4 | "esModuleInterop": true,
5 | "lib": ["esnext", "DOM"],
6 | "target": "esnext",
7 | "module": "nodenext",
8 | "moduleResolution": "nodenext",
9 | "resolveJsonModule": true,
10 | "strict": true,
11 | "paths": {
12 | "carbon-pictograms-svelte": ["./lib"],
13 | "carbon-pictograms-svelte/lib/*": ["./lib/*"]
14 | }
15 | },
16 | "include": ["src", "tests"]
17 | }
18 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "dev": "astro dev",
6 | "build": "astro build",
7 | "preview": "astro preview"
8 | },
9 | "dependencies": {
10 | "@astrojs/svelte": "^7.2.2",
11 | "astro": "^5.16.0",
12 | "carbon-components-svelte": "^0.93.0",
13 | "fuzzy": "^0.1.3",
14 | "svelte": "^5.43.14",
15 | "svelte-focus-key": "^1.0.0"
16 | },
17 | "devDependencies": {
18 | "carbon-preprocess-svelte": "^0.11.14"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/docs/astro.config.ts:
--------------------------------------------------------------------------------
1 | import svelte from "@astrojs/svelte";
2 | import { defineConfig } from "astro/config";
3 | import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";
4 | import { version } from "../package.json" assert { type: "json" };
5 |
6 | export default defineConfig({
7 | integrations: [
8 | svelte({
9 | preprocess: [optimizeImports()],
10 | }),
11 | ],
12 | vite: {
13 | plugins: [optimizeCss()],
14 | define: {
15 | __VERSION: JSON.stringify(version),
16 | },
17 | },
18 | });
19 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | on:
2 | pull_request:
3 | push:
4 | branches: [master]
5 |
6 | permissions:
7 | contents: read
8 |
9 | jobs:
10 | test:
11 | runs-on: macos-15
12 | steps:
13 | - uses: actions/checkout@v5
14 | - uses: oven-sh/setup-bun@v2
15 |
16 | - name: Install dependencies
17 | run: bun install
18 |
19 | - name: Build package
20 | run: bun run prepack
21 |
22 | - name: Test types
23 | run: bun run test:types
24 |
25 | - name: Trigger deploy
26 | if: github.ref == 'refs/heads/master'
27 | env:
28 | deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
29 | run: curl "$deploy_url"
30 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | on:
2 | push:
3 | tags:
4 | - "v*"
5 |
6 | jobs:
7 | build:
8 | runs-on: macos-15
9 | permissions:
10 | contents: read
11 | id-token: write
12 | steps:
13 | - uses: actions/checkout@v5
14 | - uses: actions/setup-node@v5
15 | with:
16 | node-version: 22
17 | registry-url: "https://registry.npmjs.org"
18 |
19 | - uses: oven-sh/setup-bun@v2
20 |
21 | - name: Install dependencies
22 | run: bun install
23 |
24 | - name: Build package
25 | run: bun run prepack
26 |
27 | - name: Prune package
28 | run: bunx culls --preserve=svelte
29 |
30 | - name: Publish package
31 | env:
32 | NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
33 | run: npm publish --provenance --access public
34 |
--------------------------------------------------------------------------------
/docs/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import "carbon-components-svelte/css/all.css";
3 | import Home from "../components/index.svelte";
4 | ---
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 | Carbon Pictograms Svelte
16 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/template.ts:
--------------------------------------------------------------------------------
1 | import { toString } from "@carbon/icon-helpers";
2 | import { PictogramOutput } from "@carbon/pictograms";
3 |
4 | export function template({ descriptor }: PictogramOutput) {
5 | return `
19 |
20 | `;
32 | }
33 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "@carbon/pictograms" {
2 | import { toString } from "@carbon/icon-helpers";
3 |
4 | type PictogramOutput = {
5 | moduleName: string;
6 | filepath: string;
7 | descriptor: {
8 | elem: "svg";
9 | attrs: {
10 | xmlns: "http://www.w3.org/2000/svg";
11 | viewBox: "0 0 32 32";
12 | fill: "currentColor";
13 | width: 64;
14 | height: 64;
15 | }
16 | content: Parameters[0][];
17 | name: string;
18 | };
19 | };
20 |
21 | export type BuildIcons = {
22 | icons: ReadonlyArray<{
23 | name: string;
24 | friendlyName: string;
25 | namespace: [];
26 | assets: [
27 | {
28 | filepath: string;
29 | source: string;
30 | optimized: {
31 | data: string;
32 | info: {};
33 | path: string;
34 | };
35 | }
36 | ];
37 | output: [PictogramOutput];
38 | category: string;
39 | }>;
40 | };
41 | }
42 |
43 | declare module "@carbon/pictograms/metadata.json" {
44 | import type { BuildIcons } from "@carbon/pictograms";
45 | const value: BuildIcons;
46 | export default value;
47 | }
48 |
--------------------------------------------------------------------------------
/docs/src/components/LogoGithub.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
30 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | | Version | Supported |
6 | | ------- | ------------------ |
7 | | 12.x | :white_check_mark: |
8 | | 11.x | :white_check_mark: |
9 |
10 | ## Reporting a Vulnerability
11 |
12 | _Please do not report security vulnerabilities through public GitHub issues._
13 |
14 | Instead, report a vulnerability through GitHub's security advisory feature at
15 | https://github.com/carbon-design-system/carbon-icons-svelte/security/advisories/new
16 |
17 | Please include a description of the issue, the steps you took to create the
18 | issue, affected versions, and, if known, mitigations for the issue. Our team
19 | aims to respond to all new vulnerability reports within 7 business days.
20 |
21 | Additional information on reporting vulnerabilities to IBM is available at
22 | https://www.ibm.com/trust/security-psirt
23 |
24 | ## Preferred languages
25 |
26 | We prefer all communications to be in English.
27 |
28 | ## Comments on this policy
29 |
30 | If you have suggestions on how this process could be improved please
31 | [submit a pull request](https://github.com/carbon-design-system/carbon-pictograms-svelte/compare)
32 | or [file an issue](https://github.com/carbon-design-system/carbon-pictograms-svelte/issues/new) to
33 | discuss.
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "carbon-pictograms-svelte",
3 | "version": "13.14.0",
4 | "license": "Apache-2.0",
5 | "description": "Carbon Design System SVG pictograms as Svelte components",
6 | "svelte": "./lib/index.js",
7 | "main": "./lib/index.js",
8 | "types": "./lib/index.d.ts",
9 | "exports": {
10 | ".": {
11 | "types": "./lib/index.d.ts",
12 | "svelte": "./lib/index.js"
13 | },
14 | "./lib/*.svelte": {
15 | "types": "./lib/*.svelte.d.ts",
16 | "import": "./lib/*.svelte"
17 | }
18 | },
19 | "scripts": {
20 | "prepack": "bun test",
21 | "test:types": "bun tests/test-types.ts"
22 | },
23 | "devDependencies": {
24 | "@carbon/icon-helpers": "^10.68.0",
25 | "@carbon/pictograms": "12.66.0",
26 | "@types/bun": "^1.3.3",
27 | "culls": "^0.1.2",
28 | "svelte": "^5.43.14",
29 | "typescript": "^5.9.3"
30 | },
31 | "repository": {
32 | "type": "git",
33 | "url": "git+https://github.com/carbon-design-system/carbon-pictograms-svelte.git"
34 | },
35 | "homepage": "https://carbon-pictograms-svelte.onrender.com/",
36 | "bugs": "https://github.com/carbon-design-system/carbon-pictograms-svelte/issues",
37 | "keywords": [
38 | "carbon",
39 | "carbon design system",
40 | "carbon pictograms",
41 | "pictograms",
42 | "components",
43 | "svelte",
44 | "svg"
45 | ],
46 | "files": [
47 | "lib"
48 | ],
49 | "maintainers": [
50 | "Eric Liu (https://github.com/metonym)"
51 | ],
52 | "type": "module"
53 | }
54 |
--------------------------------------------------------------------------------
/tests/svelte@4/Pictograms.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/tests/svelte@5/Pictograms.svelte:
--------------------------------------------------------------------------------
1 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import buildInfo from "@carbon/pictograms/metadata.json" with { type: "json" };
2 | import { $ } from "bun";
3 | import pkg from "../package.json" with { type: "json" };
4 | import { template } from "./template.js";
5 |
6 | export const buildPictograms = async () => {
7 | console.time("Built in");
8 | await $`rm -rf lib`;
9 | await $`mkdir lib`;
10 |
11 | let definitions = `import type { Component } from "svelte";
12 | import type { SvelteHTMLElements } from "svelte/elements";
13 |
14 | export type CarbonPictogramProps = SvelteHTMLElements["svg"] & {
15 | /**
16 | * Specify the pictogram title.
17 | * @default undefined
18 | */
19 | title?: string;
20 | }\n\n`;
21 |
22 | let libExport = "";
23 |
24 | const pictograms: string[] = [];
25 | const writePromises: Promise[] = [];
26 |
27 | for (const { output } of buildInfo.icons) {
28 | const { moduleName } = output[0];
29 |
30 | pictograms.push(moduleName);
31 |
32 | definitions += `export declare const ${moduleName}: Component;\n`;
33 | libExport += `export { default as ${moduleName} } from "./${moduleName}.svelte";\n`;
34 |
35 | const fileName = `lib/${moduleName}.svelte`;
36 |
37 | writePromises.push(
38 | Bun.write(fileName, template(output[0])),
39 | Bun.write(
40 | fileName + ".d.ts",
41 | `export { ${moduleName} as default } from "./";\n`
42 | )
43 | );
44 | }
45 |
46 | await Promise.all(writePromises);
47 |
48 | const packageMetadata = `${pictograms.length} pictograms from @carbon/pictograms@${pkg.devDependencies["@carbon/pictograms"]}`;
49 |
50 | await Bun.write(
51 | "lib/index.d.ts",
52 | `// Type definitions for ${pkg.name}
53 | // ${packageMetadata}
54 |
55 | ${definitions}`
56 | );
57 | await Bun.write("lib/index.js", libExport);
58 | await Bun.write(
59 | "PICTOGRAM_INDEX.md",
60 | `
61 | # Pictogram Index
62 |
63 | > ${packageMetadata}
64 |
65 | ## Usage
66 |
67 | \`\`\`svelte
68 |
71 |
72 |
73 | \`\`\`
74 |
75 | ## List of Pictograms by \`ModuleName\`
76 |
77 | ${pictograms.map((moduleName) => `- ${moduleName}`).join("\n")}
78 | `.trim() + "\n"
79 | );
80 |
81 | console.timeEnd("Built in");
82 | return pictograms;
83 | };
84 |
--------------------------------------------------------------------------------
/docs/src/components/Header.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Carbon Pictograms Svelte
24 | v{VERSION}
25 |
26 |
27 |
28 |
33 |
34 |
35 | Carbon Svelte portfolio
36 |
37 | Carbon Components Svelte
38 |
39 |
40 | Carbon Icons Svelte
41 |
42 |
45 | Carbon Charts Svelte
46 |
47 |
48 | Carbon Preprocess Svelte
49 |
50 | Resources
51 |
52 | Carbon Design System
53 |
54 |
55 | IBM Design Language
56 |
57 |
58 |
59 |
60 |
61 |
62 |
77 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## Getting Started
4 |
5 | Fork the repo and clone your fork:
6 |
7 | ```bash
8 | git clone
9 | cd carbon-pictograms-svelte
10 | ```
11 |
12 | Set the original repo as the upstream:
13 |
14 | ```bash
15 | git remote add upstream git@github.com:carbon-design-system/carbon-pictograms-svelte.git
16 | # verify that the upstream is added
17 | git remote -v
18 | ```
19 |
20 | ## Prerequisites
21 |
22 | This repo uses `bun`. See the docs for [installation instructions](https://bun.sh/docs/installation).
23 |
24 | ## Workflow
25 |
26 | ### Building
27 |
28 | Icons are generated using `bun` as a test runner.
29 |
30 | Run `bun prepack` to build the library. Icons should be emitted to the `lib` folder and tests should pass.
31 |
32 | ## Submitting a Pull Request
33 |
34 | ### Sync Your Fork
35 |
36 | Before submitting a pull request, make sure your fork is up to date with the latest upstream changes.
37 |
38 | ```bash
39 | git fetch upstream
40 | git checkout master
41 | git merge upstream/master
42 | ```
43 |
44 | ### Submit a PR
45 |
46 | After you've pushed your changes to remote, submit your PR. Make sure you are comparing `/feature` to `origin/master`.
47 |
48 | ## Maintainer guide
49 |
50 | The following items only apply to project maintainers.
51 |
52 | ### Release
53 |
54 | This library is published to NPM with [provenance](https://docs.npmjs.com/generating-provenance-statements) via a [GitHub workflow](https://github.com/carbon-design-system/carbon-pictograms-svelte/blob/master/.github/workflows/release.yml).
55 |
56 | The workflow is automatically triggered when pushing a tag that begins with `v` (e.g., `v12.3.0`).
57 |
58 | However, maintainers must perform a few things in preparation for a release.
59 |
60 | ```sh
61 | # 1. Install and re-build the library.
62 | bun install; bun prepack;
63 |
64 | # 2. Commit the changes using the new version as the commit message.
65 | git commit -am "v12.3.0"
66 |
67 | # 3. Create a tag.
68 | git tag v12.3.0
69 |
70 | # 4. Push the tag to the remote.
71 | # This will trigger the `release.yml` workflow to publish a new package to NPM (with provenance).
72 | git push origin v12.3.0
73 | ```
74 |
75 | If all goes as expected, the [`release.yml` workflow](https://github.com/carbon-design-system/carbon-pictograms-svelte/actions/workflows/release.yml) should trigger a new run and publish the new version to NPM.
76 |
77 | ### Post-release checklist
78 |
79 | After confirming that the new release is published to NPM, perform the following:
80 |
81 | 1. Create a [new release](https://github.com/carbon-design-system/carbon-pictograms-svelte/releases/new) on GitHub. Click "Generate release notes" to automatically list changes by commit with the relevant Pull Request and author metadata. You may manually remove notes that are not relevant to the release (e.g., CI changes).
82 |
83 | 2. Publish the release as the latest release.
84 |
--------------------------------------------------------------------------------
/tests/template.test.ts:
--------------------------------------------------------------------------------
1 | import type { PictogramOutput } from "@carbon/pictograms";
2 | import { describe, expect, test } from "bun:test";
3 | import { template } from "../src/template.js";
4 |
5 | describe("template", () => {
6 | test("should generate correct Svelte component template with minimal input", () => {
7 | const input: PictogramOutput = {
8 | moduleName: "TestPictogram",
9 | filepath: "test-pictogram/index.js",
10 | descriptor: {
11 | elem: "svg",
12 | attrs: {
13 | xmlns: "http://www.w3.org/2000/svg",
14 | viewBox: "0 0 32 32",
15 | fill: "currentColor",
16 | width: 64,
17 | height: 64,
18 | },
19 | content: [
20 | {
21 | elem: "path",
22 | attrs: {
23 | d: "M16 2l14 28H2L16 2z",
24 | },
25 | },
26 | ],
27 | name: "test-pictogram",
28 | },
29 | };
30 |
31 | const result = template(input);
32 |
33 | expect(result).toContain("