Solid Icons

https://github.com/x64bits/solid-icons
Admin
Solid Icons is a reactive and tree-shakeable icon library for SolidJS applications, providing access...
Tokens:21,164
Snippets:294
Trust Score:7.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://github.com/x64bits/solid-icons/blob/main/apps/tanstack-test/README.md

Install dependencies and launch the development server to enable hot-reloading.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Run Local Documentation Server

Source: https://github.com/x64bits/solid-icons/blob/main/apps/tanstack-test/README.md

Navigate to the website directory, install dependencies, and start the development server.

```sh
cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev
```

--------------------------------

### Install solid-icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/00_START_HERE.md

Install the package using npm to begin using icon components in your project.

```bash
npm install solid-icons
```

--------------------------------

### Install project dependencies

Source: https://github.com/x64bits/solid-icons/blob/main/apps/web/README.md

Use this command to install all required project dependencies after cloning the repository.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Clone and build the project

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Standard commands to clone the repository and install dependencies for building.

```bash
$ git clone https://github.com/x64Bits/solid-icons
$ cd solid-icons
$ yarn
$ yarn build
```

--------------------------------

### Run development mode

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Start the development server to watch for file changes.

```bash
$ yarn dev
```

--------------------------------

### Install Solid Icons via Package Managers

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Commands to add the library to your project using Yarn or NPM.

```bash
yarn add solid-icons
```

```bash
npm install solid-icons --save
```

--------------------------------

### Example Usage of getIcons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Demonstrates how to define a pack configuration and invoke the icon processing function.

```typescript
const pack = {
  shortName: "tb",
  packName: "Tabler Icons",
  path: "./src/icons/tabler/icons",
  license: "MIT",
  url: "https://github.com/tabler/tabler-icons"
};

const icons = await getIcons(pack);
// [
//   { fileName: "TbHome", svgAttribs: {...}, contents: '<path d="..."/>' },
//   { fileName: "TbSettings", svgAttribs: {...}, contents: '<path d="..."/>' },
//   ...
// ]
```

--------------------------------

### Create IconTree Object

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Example of creating an IconTree object for custom icons.

```typescript
const myIcon: IconTree = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2L2 12h3v8h14v-8h3L12 2z"/>'
};
```

--------------------------------

### Importing and using Remix Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Provides an example of using Remix Icons within an editor-style component.

```typescript
import { RiHome2Line, RiShutDownLine, RiBoldItalic } from 'solid-icons/ri';

export default function Editor() {
  return (
    <div>
      <RiHome2Line size={24} />
      <button>
        <RiBoldItalic size={20} /> Bold
      </button>
      <RiShutDownLine size={24} onClick={() => shutdown()} />
    </div>
  );
}
```

--------------------------------

### Use IconProps in Component

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Example of passing IconProps to an icon component.

```typescript
import { TbHome } from 'solid-icons/tb';

const HomeIcon = () => (
  <TbHome 
    size={24}
    color="blue"
    title="Home"
    role="img"
    aria-label="Go to home page"
    class="my-icon"
  />
);
```

--------------------------------

### Use IconTemplate with IconBaseProps

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Example of using IconTemplate to render a custom icon.

```typescript
import { IconTemplate } from 'solid-icons';

const customIcon: IconTree = {
  a: { viewBox: '0 0 24 24', fill: 'currentColor' },
  c: '<circle cx="12" cy="12" r="10"/>'
};

export function MyCircle(props: IconProps) {
  return <IconTemplate iconSrc={customIcon} {...props} />;
}
```

--------------------------------

### Type Check with IconTypes

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Example of using IconTypes for type checking icon components.

```typescript
import type { IconTypes } from 'solid-icons';
import { TbHome } from 'solid-icons/tb';

// Type check
const homeIcon: IconTypes = TbHome;
```

--------------------------------

### Create Directory

Source: https://github.com/x64bits/solid-icons/blob/main/apps/tanstack-test/README.md

Create a root directory for cloning the documentation and project repositories.

```sh
mkdir tanstack
```

--------------------------------

### Initialize Astro Project

Source: https://github.com/x64bits/solid-icons/blob/main/apps/astro-test/README.md

Use this command to scaffold a new Astro project using the minimal template.

```sh
yarn create astro@latest -- --template minimal
```

--------------------------------

### Importing and using Simple Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Demonstrates importing brand logos from the 'si' prefix and rendering them with size properties.

```typescript
import { SiGithub, SiTwitter, SiReact, SiNode } from 'solid-icons/si';

export default function Footer() {
  return (
    <footer>
      <a href="https://github.com"><SiGithub size={32} /></a>
      <a href="https://twitter.com"><SiTwitter size={32} /></a>
      <p>Built with <SiReact size={20} /> and <SiNode size={20} /></p>
    </footer>
  );
}
```

--------------------------------

### main()

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Orchestrates the entire build process, including loading icon packs, processing SVGs, and writing output files. This is the primary entry point for the build system.

```APIDOC
## main()

### Description
Orchestrates the entire build process: loads icon packs, processes SVGs, and writes output files.

### Signature
`async function main(): Promise<void>`

### CLI Arguments
- **--isolate** (string) - Build only one pack instead of all
- **--web** (boolean) - Generate web explorer metadata files
```

--------------------------------

### Build for web

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Build files specifically for web output.

```bash
$ yarn dev --web
```

--------------------------------

### Configure Icon Packs List

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

JSON array containing the configuration for all 17 supported icon packs.

```json
[
  { "shortName": "ai", "packName": "Ant Design Icons", ... },
  { "shortName": "bs", "packName": "Bootstrap Icons", ... },
  { "shortName": "bi", "packName": "BoxIcons", ... },
  { "shortName": "fi", "packName": "Feather", ... },
  { "shortName": "fa", "packName": "Font Awesome", ... },
  { "shortName": "hi", "packName": "Heroicons", ... },
  { "shortName": "im", "packName": "IcoMoon Free", ... },
  { "shortName": "io", "packName": "Ionicons", ... },
  { "shortName": "ri", "packName": "Remix Icon", ... },
  { "shortName": "si", "packName": "Simple Icons", ... },
  { "shortName": "ti", "packName": "Typicons", ... },
  { "shortName": "vs", "packName": "VS Code Icons", ... },
  { "shortName": "wi", "packName": "Weather Icons", ... },
  { "shortName": "cg", "packName": "css.gg", ... },
  { "shortName": "tb", "packName": "Tabler Icons", ... },
  { "shortName": "oc", "packName": "Github Octicons", ... },
  { "shortName": "md", "packName": "Material Design Icons", ... }
]
```

--------------------------------

### Basic Icon Usage in SolidJS

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Demonstrates importing and rendering a single icon component with size and color properties.

```typescript
import { TbHome } from 'solid-icons/tb';

export default function Dashboard() {
  return <TbHome size={24} color="#2c4f7c" />;
}
```

--------------------------------

### Build System Commands

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Use these commands to trigger specific build tasks for icon packs or web metadata.

```bash
yarn build                  # Build all packs
yarn build --isolate="tb"   # Build only Tabler Icons
yarn build --web            # Generate web explorer data
```

--------------------------------

### Main Build Entry Point

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

The primary function signature for orchestrating the build process.

```typescript
async function main(): Promise<void>
```

--------------------------------

### Importing and using Font Awesome icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Shows how to import icons from 'solid-icons/fa' and integrate them into UI components.

```typescript
import { FaUser, FaGithub, FaBrandTypeScript } from 'solid-icons/fa';

export default function Profile() {
  return (
    <div>
      <FaUser size={32} />
      <a href="https://github.com">
        <FaGithub size={24} />
      </a>
      <span>Built with <FaBrandTypeScript size={20} /></span>
    </div>
  );
}
```

--------------------------------

### Importing and using IcoMoon Free

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Demonstrates the 'im' prefix for professional, consistent icons.

```typescript
import { ImHome, ImSearch, ImBookmark, ImHeart } from 'solid-icons/im';

export default function App() {
  return (
    <div>
      <ImHome size={24} />
      <ImSearch size={24} />
      <ImBookmark size={24} />
      <ImHeart size={24} color="red" />
    </div>
  );
}
```

--------------------------------

### Prepare Distribution Function

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Builds the core library and prepares the output directory structure.

```typescript
async function prepareDist(): Promise<void>
```

--------------------------------

### Importing and using Heroicons with variants

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Illustrates switching between outline and solid variants of Heroicons using Solid.js signals.

```typescript
import { HiOutlineMenu, HiMenu, HiOutlineUser } from 'solid-icons/hi';

import { createSignal } from 'solid-js';

export default function Header() {
  const [variant, setVariant] = createSignal('outline');

  return (
    <header>
      {variant() === 'outline' ? (
        <HiOutlineMenu size={24} onClick={() => setVariant('solid')} />
      ) : (
        <HiMenu size={24} onClick={() => setVariant('outline')} />
      )}
      <HiOutlineUser size={24} />
    </header>
  );
}
```

--------------------------------

### Build CLI Commands

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Common CLI commands for executing the build process with optional flags.

```bash
$ yarn build                    # Build all packs
$ yarn build --isolate="tb"    # Build only Tabler Icons
$ yarn build --web              # Build all + web metadata
```

--------------------------------

### NPM Publishing Configuration

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Defines entry points, Node.js version requirements, and peer dependencies in package.json.

```json
{
  "publishConfig": {
    "main": "./dist/lib/index.cjs",
    "module": "./dist/lib/index.jsx",
    "types": "./dist/lib/index.d.ts"
  },
  "engines": {
    "node": ">= 16"
  },
  "peerDependencies": {
    "solid-js": "*"
  }
}
```

--------------------------------

### Multiple Icons from Different Packs

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Demonstrates importing and using icons from multiple icon sets simultaneously.

```typescript
import { TbHome } from 'solid-icons/tb';
import { FaUser } from 'solid-icons/fa';
import { HiOutlineMenu } from 'solid-icons/hi';

export default function Menu() {
  return (
    <nav>
      <a href="/">
        <TbHome size={24} />
        <span>Home</span>
      </a>
      <a href="/profile">
        <FaUser size={24} />
        <span>Profile</span>
      </a>
      <button>
        <HiOutlineMenu size={24} />
      </button>
    </nav>
  );
}
```

--------------------------------

### Import and use css.gg icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Import icons from the solid-icons/cg package and render them as components with size properties.

```typescript
import { CgHome, CgSearch, CgAsterisk, CgBell } from 'solid-icons/cg';

export default function App() {
  return (
    <nav>
      <CgHome size={24} />
      <CgSearch size={24} />
      <CgBell size={24} />
    </nav>
  );
}
```

--------------------------------

### Invoke Build System via CLI

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Commands to trigger the build process for all icon packs or specific subsets.

```bash
$ yarn build              # Build all icon packs
$ yarn build --isolate="tb"  # Build single pack (Tabler Icons)
$ yarn build --web        # Also generate web explorer data
```

--------------------------------

### Implement Basic Custom Icon

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/CustomIcon.md

A simple implementation of a custom icon using a single path.

```typescript
import { CustomIcon } from 'solid-icons';

const customIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>'
};

export default function App() {
  return (
    <CustomIcon src={customIcon} size={24} color="#2c4f7c" />
  );
}
```

--------------------------------

### Clone Repositories

Source: https://github.com/x64bits/solid-icons/blob/main/apps/tanstack-test/README.md

Clone the TanStack website and the target project repository into the local workspace.

```sh
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

--------------------------------

### Importing and using Tabler Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Demonstrates importing icons from the 'solid-icons/tb' package and rendering them with size props.

```typescript
import { TbHome, TbSettings, TbBrandSolidjs } from 'solid-icons/tb';

export default function App() {
  return (
    <nav>
      <TbHome size={24} />
      <TbSettings size={24} />
      <TbBrandSolidjs size={24} />
    </nav>
  );
}
```

--------------------------------

### Directory Structure

Source: https://github.com/x64bits/solid-icons/blob/main/apps/tanstack-test/README.md

Expected layout of the local tanstack directory.

```text
tanstack/
   |
   +-- form/
   |
   +-- tanstack.com/
```

--------------------------------

### Importing and using Typicons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Shows how to use the 'ti' prefix for rounded, friendly icons, including color customization.

```typescript
import { TiHome, TiHeartOutline, TiHeartFullOutline } from 'solid-icons/ti';

export default function Favorites() {
  return (
    <div>
      <TiHome size={24} />
      <button>
        <TiHeartOutline size={32} /> Like
      </button>
      <TiHeartFullOutline size={32} color="red" />
    </div>
  );
}
```

--------------------------------

### Importing and using VS Code Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Illustrates the use of the 'vs' prefix for developer-focused icons.

```typescript
import { VsHome, VsCode, VsDebug, VsTerminal } from 'solid-icons/vs';

export default function DevTools() {
  return (
    <div>
      <VsHome size={24} />
      <VsCode size={24} />
      <VsDebug size={24} />
      <VsTerminal size={24} />
    </div>
  );
}
```

--------------------------------

### Build with isolation

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Optimize build time by isolating a specific library.

```bash
$ yarn dev --isolate="ai"
```

--------------------------------

### Define Build Path Constants

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Configures the root, distribution, and web-accessible paths for icon assets.

```typescript
const DEFAULT_WEB_PATH = "../../apps/web/public";

export const ROOT_PATH = path.resolve();
export const DIST_PATH = path.resolve("./dist");
export const WEB_PATH = process.env.WEB_PATH || DEFAULT_WEB_PATH;
export const WEB_ICONS_PATH = path.resolve(WEB_PATH, "icons");
```

--------------------------------

### View Project Documentation Cross-References

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/INDEX.md

Visual representation of the dependency and reference structure between project documentation files.

```text
README.md
  ├→ api-reference/IconTemplate.md (core function)
  ├→ api-reference/CustomIcon.md (custom icons)
  ├→ api-reference/IconComponents.md (all icons)
  ├→ types.md (type definitions)
  ├→ configuration.md (build setup)
  └→ icon-packs.md (icon reference)

types.md
  ├→ api-reference/IconTemplate.md (uses IconTree, IconBaseProps)
  ├→ api-reference/CustomIcon.md (uses IconBaseProps)
  ├→ api-reference/IconComponents.md (uses IconProps, IconTypes)
  └→ api-reference/BuildSystem.md (uses build types)

configuration.md
  └→ api-reference/BuildSystem.md (implements these configs)

api-reference/BuildSystem.md
  ├→ configuration.md (configured by)
  └→ types.md (uses build types)

icon-packs.md
  └→ api-reference/IconComponents.md (uses these packs)
```

--------------------------------

### Import and use Ant Design Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Demonstrates importing outlined, filled, and two-tone variants from the ai prefix and applying size and color props.

```typescript
import { 
  AiSmileOutlined, 
  AiSmileFilled, 
  AiSmileTwoTone,
  AiHomeOutlined 
} from 'solid-icons/ai';

export default function Emotions() {
  return (
    <div>
      <AiSmileOutlined size={32} />
      <AiSmileFilled size={32} color="gold" />
      <AiSmileTwoTone size={32} color="blue" />
      <AiHomeOutlined size={32} />
    </div>
  );
}
```

--------------------------------

### Render basic icon with IconTemplate

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconTemplate.md

Demonstrates creating a custom icon component using IconTemplate with static SVG data.

```typescript
import { IconTemplate } from 'solid-icons';

const myIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>'
};

const Icon = (props) => <IconTemplate src={myIcon} {...props} />;

export default function App() {
  return <Icon size={24} color="#2c4f7c" />;
}
```

--------------------------------

### Define index file templates with indexFileTypes

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Configuration object defining templates for generating index files that aggregate icons.

```typescript
const indexFileTypes = [
  { type: "cjs", template: ..., header: ..., fileName: "index.cjs" },
  { type: "mjs", template: ..., header: ..., fileName: "index.js" },
  { type: "types", template: ..., header: ..., fileName: "index.d.ts" }
]
```

--------------------------------

### Import and use BoxIcons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Illustrates usage of BoxIcons with custom color properties using the bi prefix.

```typescript
import { BiHome, BiGlasses, BiHeartCircle } from 'solid-icons/bi';

export default function Dashboard() {
  return (
    <div>
      <BiHome size={24} />
      <BiGlasses size={24} />
      <BiHeartCircle size={24} color="red" />
    </div>
  );
}
```

--------------------------------

### Import and use Bootstrap Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Shows basic usage of Bootstrap icons within a header component using the bs prefix.

```typescript
import { BsHouse, BsGear, BsSearch, BsCart } from 'solid-icons/bs';

export default function Shop() {
  return (
    <header>
      <BsHouse size={24} />
      <BsSearch size={24} />
      <BsCart size={24} />
      <BsGear size={24} />
    </header>
  );
}
```

--------------------------------

### Import and use GitHub Octicons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Import icons from the solid-icons/oc package, supporting size and color customization.

```typescript
import { OcMarkGithub, OcRepoForked, OcAlert, OcCheck } from 'solid-icons/oc';

export default function Repository() {
  return (
    <div>
      <OcMarkGithub size={32} />
      <OcRepoForked size={24} />
      <OcAlert size={24} color="orange" />
      <OcCheck size={24} color="green" />
    </div>
  );
}
```

--------------------------------

### Implement reactive icon color

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconTemplate.md

Shows how to use Solid.js signals to dynamically update the icon color prop.

```typescript
import { createSignal } from 'solid-js';
import { IconTemplate } from 'solid-icons';

const myIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>'
};

export default function App() {
  const [color, setColor] = createSignal('blue');

  const Icon = (props) => <IconTemplate src={myIcon} {...props} />;

  return (
    <div>
      <Icon size={32} color={color()} />
      <button onClick={() => setColor('red')}>Change Color</button>
    </div>
  );
}
```

--------------------------------

### Icon with Reactivity

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Shows how to update icon properties dynamically using SolidJS signals.

```typescript
import { createSignal } from 'solid-js';
import { TbHome, TbSettings } from 'solid-icons/tb';

export default function Navigation() {
  const [view, setView] = createSignal('home');

  return (
    <div>
      <button 
        onClick={() => setView('home')}
        class={view() === 'home' ? 'active' : ''}
      >
        <TbHome size={20} color={view() === 'home' ? 'blue' : 'gray'} />
        Home
      </button>
      <button 
        onClick={() => setView('settings')}
        class={view() === 'settings' ? 'active' : ''}
      >
        <TbSettings size={20} color={view() === 'settings' ? 'blue' : 'gray'} />
        Settings
      </button>
    </div>
  );
}
```

--------------------------------

### Visualize type relationships

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Diagram showing the inheritance and composition of icon-related types.

```text
SVGSVGElementTags (from Solid.js)
    ↓ extends
IconProps
    ↓ extends
IconBaseProps
    ↑ contains
    └── IconTree
```

--------------------------------

### Define icon component templates with iconFileTypes

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Configuration object defining templates, headers, and extensions for CJS, MJS, and TypeScript icon generation.

```typescript
const iconFileTypes = [
  {
    type: "cjs",
    template: (iconContent: IconContent) => string,
    header: string,
    fileExt: "cjs"
  },
  {
    type: "mjs",
    template: (iconContent: IconContent) => string,
    header: string,
    fileExt: "js"
  },
  {
    type: "types",
    template: (iconContent: IconContent) => string,
    header: string,
    fileExt: "d.ts"
  }
]
```

--------------------------------

### Write Web Files Function

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Generates metadata files for web explorer and search functionality.

```typescript
async function writeWebFiles(
  packs: PackAttachedIcons[]
): Promise<void>
```

```javascript
export default { icons: ["TbHome", "TbSettings", "FaUser", ...] }
```

```javascript
export default [
  { shortName: "tb", packName: "Tabler Icons", count: 4800, ... },
  { shortName: "fa", packName: "Font Awesome", count: 6800, ... },
  ...
]
```

```javascript
export default { a: {...}, c: '<path d="..."/>' }
```

--------------------------------

### Project Directory Structure

Source: https://github.com/x64bits/solid-icons/blob/main/apps/astro-test/README.md

Visual representation of the standard file and folder layout for an Astro project.

```text
/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json
```

--------------------------------

### Import and use Ionicons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Shows implementation of Ionicons in a footer component using the io prefix.

```typescript
import { IoHome, IoSearch, IoSettings, IoMenu } from 'solid-icons/io';

export default function MobileApp() {
  return (
    <footer>
      <IoHome size={24} />
      <IoSearch size={24} />
      <IoSettings size={24} />
      <IoMenu size={24} />
    </footer>
  );
}
```

--------------------------------

### Importing and using Weather Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Uses the 'wi' prefix to conditionally render weather-related icons based on state.

```typescript
import { WiCloudy, WiRain, WiSnow, WiSunny } from 'solid-icons/wi';

export default function Weather() {
  const [condition, setCondition] = createSignal('cloudy');

  return (
    <div>
      {condition() === 'cloudy' && <WiCloudy size={64} />}
      {condition() === 'rain' && <WiRain size={64} />}
      {condition() === 'snow' && <WiSnow size={64} />}
      {condition() === 'sunny' && <WiSunny size={64} />}
    </div>
  );
}
```

--------------------------------

### Override Web Path Environment Variable

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Sets a custom output directory for web explorer metadata during the build process.

```bash
$ WEB_PATH=/custom/path yarn build --web
```

--------------------------------

### Import and Use Icons in JSX

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Import specific icons from the library and render them as JSX components with custom props like size and color.

```jsx
import { TbBrandSolidjs } from "solid-icons/tb";

<TbBrandSolidjs size={24} color="#2c4f7c" />;
```

--------------------------------

### Configure Icon Component Props

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Demonstrates how to control icon appearance and accessibility attributes directly via component props.

```typescript
<TbHome 
  size={24}           // Configure size
  color="blue"        // Configure color
  title="Home"        // Add accessibility
  style={{ ... }}     // Add custom styles
  role="img"          // Standard SVG attributes
/>
```

--------------------------------

### Using Icon Components

Source: https://github.com/x64bits/solid-icons/blob/main/packages/solid-icons/README.md

Import and use icon components as standard JSX elements with custom SVG properties.

```jsx
import { FaSolidChartLine } from "solid-icons/fa";

<FaSolidChartLine size={24} color="#2c4f7c" class="custom-icon" title="a11y" />;
```

--------------------------------

### Import and use generated icon components

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/00_START_HERE.md

Standard usage pattern for icons imported from specific icon pack modules.

```typescript
import { TbHome } from 'solid-icons/tb';
<TbHome size={24} color="blue" />
```

--------------------------------

### Write Each Web Files Function

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Internal function to generate web metadata for a single pack.

```typescript
async function writeEachWebFiles(pack: PackAttachedIcons): void
```

--------------------------------

### Write Library Files Function

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Generates icon component files for each pack, including CJS, ESM, and TypeScript definitions.

```typescript
async function writeLibFiles(
  iconsPayload: PackAttachedIcons[]
): Promise<void>
```

```javascript
import { IconTemplate } from "../../lib/index.jsx";
export function TbHome(props){return IconTemplate({a:{fill:"currentColor",viewBox:"0 0 24 24"},c:'<path d="..."/>'},props)}
export function TbSettings(props){return IconTemplate({a:{fill:"currentColor",viewBox:"0 0 24 24"},c:'<path d="..."/>'},props)}
```

--------------------------------

### Import generated icon components

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Import icon components from any of the 17 supported icon packs using their respective prefixes.

```typescript
import { TbHome, TbSettings } from 'solid-icons/tb';        // Tabler
import { FaUser, FaGithub } from 'solid-icons/fa';          // Font Awesome
import { HiOutlineMenu, HiMenu } from 'solid-icons/hi';      // Heroicons
import { AiSmileOutlined, AiSmileTwoTone } from 'solid-icons/ai'; // Ant Design
import { RiHome2Line } from 'solid-icons/ri';               // Remix
import { BsHouse } from 'solid-icons/bs';                   // Bootstrap
import { FiHome } from 'solid-icons/fi';                    // Feather
import { BiHome } from 'solid-icons/bi';                    // BoxIcons
import { IoHome } from 'solid-icons/io';                    // Ionicons
import { SiGithub } from 'solid-icons/si';                  // Simple Icons
import { TiHome } from 'solid-icons/ti';                    // Typicons
import { VsHome } from 'solid-icons/vs';                    // VS Code
import { WiCloudy } from 'solid-icons/wi';                  // Weather
import { ImHome } from 'solid-icons/im';                    // IcoMoon
import { CgHome } from 'solid-icons/cg';                    // css.gg
import { OcMarkGithub } from 'solid-icons/oc';              // Octicons
import { MdHome } from 'solid-icons/md';                    // Material Design
```

--------------------------------

### Exported types and functions

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/types.md

Overview of the main interfaces and functions exported from the library entry point.

```typescript
// From solid-icons/lib or solid-icons
export interface IconTree { ... }
export interface IconProps { ... }
export interface IconBaseProps { ... }
export declare type IconTypes = ...

// Functions
export const CustomIcon = (props: IconBaseProps) => { ... }
export function IconTemplate(iconSrc: IconTree, props: IconBaseProps): JSX.Element { ... }
```

--------------------------------

### Configure solid-icons components

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Apply custom props like size, color, class, and title to icon components.

```jsx
import { TbBrandSolidjs } from "solid-icons/tb";

<TbBrandSolidjs size={24} color="#2c4f7c" class="custom-icon" title="a11y" />;
```

--------------------------------

### Tree-Shaking Icon Imports

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Import specific icons to ensure efficient tree-shaking and smaller bundle sizes.

```typescript
// Good: Only TbHome is included
import { TbHome } from 'solid-icons/tb';

// Avoid: Entire Tabler pack is included (slower bundling)
import * as TablerIcons from 'solid-icons/tb';
```

--------------------------------

### Render an Icon Component

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/00_START_HERE.md

Import specific icons from the library and use them as components with props like size and color.

```typescript
import { TbHome } from 'solid-icons/tb';

<TbHome size={24} color="blue" />
```

--------------------------------

### toPascalCase(fileName)

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Converts hyphenated strings into PascalCase.

```APIDOC
## toPascalCase(fileName)

### Description
Converts hyphenated names to PascalCase.

### Parameters
- **fileName** (string) - Required - The hyphenated string to convert

### Return Type
- **string** - PascalCase string
```

--------------------------------

### Create custom icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Define and render custom icon objects using the CustomIcon component.

```typescript
import { CustomIcon } from 'solid-icons';

const myBrandIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 100 100' },
  c: '<circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="2" fill="none"/>'
};

export default function Branding() {
  return (
    <CustomIcon 
      src={myBrandIcon} 
      size={64}
      color="navy"
    />
  );
}
```

--------------------------------

### Write Each Pack Function

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Internal function to generate output files for a single icon pack.

```typescript
function writeEachPack(pack: PackAttachedIcons): void
```

--------------------------------

### getIcons(pack: PackItem)

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Reads all SVG files from a specified icon pack, optimizes them using SVGO, and extracts icon data for component generation.

```APIDOC
## getIcons(pack: PackItem)

### Description
Reads all SVG files from a pack, optimizes them, and extracts icon data.

### Signature
`function getIcons(pack: PackItem): Promise<IconContent[]>`

### Parameters
- **pack** (PackItem) - Icon pack configuration object

### Return Type
`Promise<IconContent[]>` - Array of processed icon objects
```

--------------------------------

### Configure Vitest Environment

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Defines the test environment and transformation settings for Solid components in vitest.config.ts.

```typescript
{
  test: {
    include: ["./test/**.jsx"],
    environment: "jsdom",
    transformMode: { web: [/.[jt]sx?/] },
    threads: false,
    isolate: true,
    testTimeout: 15000
  }
}
```

--------------------------------

### Importing Icon Components

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Icons are imported from submodules corresponding to their pack prefix. Each pack exports individual icon components as named functions.

```typescript
// Tabler Icons
import { TbBrandSolidjs, TbHome, TbSettings } from 'solid-icons/tb';

// Font Awesome
import { FaBrandTypeScript, FaUser } from 'solid-icons/fa';

// Ant Design Icons
import { AiSmileOutlined, AiSmileTwoTone } from 'solid-icons/ai';

// Remix Icon
import { RiHome2Line, RiShutDownLine } from 'solid-icons/ri';
```

--------------------------------

### Import and use Material Design Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Import icons from the solid-icons/md package for use in Material Design-compliant interfaces.

```typescript
import { MdHome, MdSearch, MdSettings, MdFavoriteBorder } from 'solid-icons/md';

export default function Dashboard() {
  return (
    <nav>
      <MdHome size={24} />
      <MdSearch size={24} />
      <MdSettings size={24} />
      <MdFavoriteBorder size={24} />
    </nav>
  );
}
```

--------------------------------

### optimizeContents()

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Optimizes raw SVG content based on the specified icon pack and file path.

```APIDOC
## optimizeContents(contents, shortName, path)

### Description
Optimizes SVG content and applies pack-specific normalizations based on the provided icon pack identifier.

### Signature
`async function optimizeContents(contents: string, shortName: string, path: string): Promise<Output>`

### Parameters
- **contents** (string) - Required - Raw SVG XML string
- **shortName** (string) - Required - Icon pack identifier (e.g., "tb", "fa")
- **path** (string) - Required - File path for style detection

### Return Type
- **Output** - SVGO output with `.data` property containing optimized SVG
```

--------------------------------

### Implement Custom Icon with Multiple Paths

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/CustomIcon.md

Rendering an icon composed of multiple SVG path elements.

```typescript
import { CustomIcon } from 'solid-icons';

const multiPathIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 48 48' },
  c: `
    <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"/>
    <path d="M24 12c-6.63 0-12 5.37-12 12s5.37 12 12 12 12-5.37 12-12-5.37-12-12-12z"/>
  `
};

export default function App() {
  return (
    <CustomIcon 
      src={multiPathIcon} 
      size="2rem" 
      color="blue"
      class="my-icon-class"
    />
  );
}
```

--------------------------------

### formatFileName(filePath, packInfo)

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Converts an SVG file path into a PascalCase component name based on the provided pack configuration.

```APIDOC
## formatFileName(filePath, packInfo)

### Description
Converts an SVG file path to a PascalCase component name by extracting the filename, normalizing it, and applying pack-specific style detection.

### Parameters
- **filePath** (string) - Required - Full file system path to SVG
- **packInfo** (PackItem) - Required - Pack configuration used for style detection

### Return Type
- **string** - PascalCase component name
```

--------------------------------

### Import and use Feather Icons

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/icon-packs.md

Displays minimal Feather icons in a navigation component using the fi prefix.

```typescript
import { FiHome, FiSearch, FiSettings, FiMenu } from 'solid-icons/fi';

export default function App() {
  return (
    <nav>
      <FiMenu size={24} />
      <FiHome size={24} />
      <FiSearch size={24} />
      <FiSettings size={24} />
    </nav>
  );
}
```

--------------------------------

### Icon Components

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Standard icon components exported by icon packs, accepting common styling and accessibility props.

```APIDOC
## Icon Components

### Description
All icon components exported by the library accept a standard set of props for styling and accessibility.

### Parameters
- **size** (string | number) - Optional - Icon width and height (Default: 1em)
- **color** (string) - Optional - SVG fill/stroke color (Default: currentColor)
- **title** (string) - Optional - Accessibility title
- **class** (string) - Optional - CSS class names
- **style** (JSX.CSSProperties) - Optional - Inline CSS styles
- **SVG attributes** (any) - Optional - Standard SVG attributes (role, aria-*, etc.)
```

--------------------------------

### Format file name to component name

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Converts an SVG file path into a PascalCase component name based on pack configuration.

```typescript
function formatFileName(
  filePath: string,
  packInfo: PackItem
): string
```

--------------------------------

### Icon Component Signature

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Describes the functional signature and props interface for all icon components in the library.

```APIDOC
## Icon Component Signature

### Description
Each icon component is a functional component that renders an SVG element. They are imported from their respective pack modules (e.g., `solid-icons/tb`).

### Signature
`function IconName(props: IconProps): JSX.Element`

### Props
- **size** (string | number) - Optional - Icon width and height. Default: `1em`
- **color** (string) - Optional - SVG fill/stroke color. Default: `currentColor`
- **title** (string) - Optional - Accessibility title.
- **class** (string) - Optional - CSS class names.
- **style** (JSX.CSSProperties) - Optional - Inline CSS styles.
- **SVG attributes** (SVGSVGElementTags) - Optional - Standard SVG attributes (role, aria-*, data-*, etc.).

### Return Type
- **JSX.Element** - A rendered SVG element that is fully reactive and responsive to prop changes.
```

--------------------------------

### Render a custom icon with CustomIcon

Source: https://github.com/x64bits/solid-icons/blob/main/README.md

Define an icon source object with SVG attributes and path content, then pass it to the CustomIcon component.

```jsx
import { CustomIcon } from "solid-icons";

const iconContent = {
  a: { fill: "currentColor", viewBox: "0 0 384 512" },
  c: '<path d="M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z"/>',
}

<CustomIcon src={iconContent} size={24} color="#2c4f7c" />;
```

--------------------------------

### Icon Component Templates

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Templates used for generating icon components in different module formats and type definitions.

```javascript
module.exports = function TbHome(props) {
  return IconTemplate({
    a: { fill: "currentColor", viewBox: "0 0 24 24" },
    c: '<path d="..."/>'
  }, props)
};
```

```javascript
export function TbHome(props) {
  return IconTemplate({
    a: { fill: "currentColor", viewBox: "0 0 24 24" },
    c: '<path d="..."/>'
  }, props)
}
```

```typescript
export declare const TbHome: IconTypes;
```

--------------------------------

### Icon in a Button Component

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/IconComponents.md

Shows how to compose icons within custom reusable components.

```typescript
import { TbChevronRight } from 'solid-icons/tb';

function Button(props) {
  return (
    <button class="btn" {...props}>
      <span>{props.children}</span>
      <TbChevronRight size={16} style={{ "margin-left": "0.5rem" }} />
    </button>
  );
}

export default function App() {
  return <Button onClick={() => console.log('clicked')}>Next</Button>;
}
```

--------------------------------

### Convert to PascalCase

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Transforms hyphenated strings into PascalCase format.

```typescript
function toPascalCase(fileName: string): string
```

--------------------------------

### Render icons with IconTemplate

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Use IconTemplate to render an SVG icon with full Solid.js reactivity.

```typescript
import { IconTemplate } from 'solid-icons';

const myIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2L2 12h3v8h14v-8h3L12 2z"/>'
};

const Icon = (props) => <IconTemplate iconSrc={myIcon} {...props} />;
<Icon size={24} color="blue" />
```

--------------------------------

### Implement Custom Icon with Accessibility and Reactive Props

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/CustomIcon.md

Using reactive signals to update icon properties and adding accessibility attributes.

```typescript
import { createSignal } from 'solid-js';
import { CustomIcon } from 'solid-icons';

const customIcon = {
  a: { fill: 'currentColor', viewBox: '0 0 24 24' },
  c: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>'
};

export default function App() {
  const [size, setSize] = createSignal(24);

  return (
    <div>
      <CustomIcon 
        src={customIcon} 
        size={size()}
        color="green"
        title="Custom Icon"
        role="img"
        aria-label="Custom icon example"
      />
      <button onClick={() => setSize(s => s + 4)}>Enlarge</button>
    </div>
  );
}
```

--------------------------------

### Recursively find SVG files with getPackFiles

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/api-reference/BuildSystem.md

Traverses a directory tree to collect absolute paths of all .svg files.

```typescript
function getPackFiles(
  dirPath: string,
  files?: string[]
): string[]
```

--------------------------------

### Manage reactive icon states

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/README.md

Update icon properties dynamically based on component state using SolidJS signals.

```typescript
import { createSignal } from 'solid-js';
import { TbHome, TbSettings } from 'solid-icons/tb';

export default function Navigation() {
  const [view, setView] = createSignal('home');

  return (
    <nav>
      <button onClick={() => setView('home')}>
        <TbHome 
          size={20} 
          color={view() === 'home' ? 'blue' : 'gray'} 
        />
        Home
      </button>
      <button onClick={() => setView('settings')}>
        <TbSettings 
          size={20} 
          color={view() === 'settings' ? 'blue' : 'gray'} 
        />
        Settings
      </button>
    </nav>
  );
}
```

--------------------------------

### Configure package.json exports

Source: https://github.com/x64bits/solid-icons/blob/main/_autodocs/configuration.md

Defines conditional exports for the library to support ESM, CommonJS, and Solid.js module resolution.

```json
{
  "main": "./src/lib/index.tsx",
  "module": "./src/lib/index.tsx",
  "types": "./src/lib/index.tsx",
  "publishConfig": {
    "main": "./dist/lib/index.cjs",
    "module": "./dist/lib/index.jsx",
    "types": "./dist/lib/index.d.ts",
    "exports": {
      ".": {
        "types": "./dist/lib/index.d.ts",
        "import": "./dist/lib/index.jsx",
        "require": "./dist/lib/index.cjs",
        "solid": "./dist/lib/index.jsx"
      },
      "./lib": { ... },
      "./*": {
        "types": "./dist/*/index.d.ts",
        "import": "./dist/*/index.js",
        "require": "./dist/*/index.cjs",
        "solid": "./dist/*/index.js"
      }
    }
  }
}
```
Tokens:
Raw