DOCSEARCHbyAlgolia
Submit Docs

Solid Icons

repository·main·Indexed 43 days ago

https://github.com/x64bits/solid-icons

A modern, tree-shakeable icon solution for SolidJS providing access to 17 different icon packs through a unified, reactive API. Compatible with SSR and Solid Start, it includes the CustomIcon component for SVG icons and the IconProps interface for customizing size, color, and accessibility.

Tokens
3.1K
Snippets
17
Records
18
Agent score
55%

What's inside Solid Icons

  1. Understand the Astro project structure

    main

    A minimal Astro project follows this directory structure:

    • public/: Contains static assets like images that are served directly.
    • src/pages/: Contains .astro or .md files. Each file in this directory is automatically exposed as a route based on its filename.
    • src/components/: A recommended location for storing Astro, React, Vue, Svelte, or Preact components.
    • package.json: Defines project dependencies and scripts.
    /
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

  7. Install dependencies for the web template

    main

    To set up the project, install the dependencies using your preferred package manager. While the template includes a pnpm-lock.yaml (maintained via pnpm up -Lri), you can use npm, pnpm, or yarn to install. If you switch package managers, the existing lock file can be safely removed.

    $ npm install # or pnpm install or yarn install

  8. Build the application for production

    main

    Build the application for production. This process bundles Solid in production mode, optimizes the build for performance, minifies the output, and includes hashes in the filenames for cache busting. The output is placed in the dist folder.

    $ npm run build

  9. Edit and preview TanStack project documentation locally

    main

    The TanStack documentation site fetches markdown files from project repositories. To preview changes to a specific project's documentation (e.g., TanStack/form) locally, you must structure your local directory so the project repository name matches the project name exactly.

    1. Create a tanstack directory.
    2. Clone the tanstack.com repository and the target project repository (e.g., form) into that directory.
    3. Ensure the directory structure is:
      tanstack/
   |-- form/
   +-- tanstack.com/
    4. Navigate to tanstack.com, install dependencies, and run the dev server.
    5. Access the documentation via http://localhost:3000/{project-name}/latest/docs/{page}.

    Important Notes:

    • Directory Naming: The folder name in your file system must match the project's repository name (e.g., form) for the documentation to be found.
    • Reloading: You must manually reload the browser to see changes made to markdown files.
    • New Pages: If you add a new documentation page, you must update the docs/config.json file within the project's repository.
    # Example setup for TanStack/form
mkdir tanstack
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git

cd tanstack.com
pnpm i
pnpm dev

  10. Run Astro CLI commands

    main

    All commands should be executed from the project root. Use yarn to run the following lifecycle and CLI commands:

    • yarn install: Installs project dependencies.
    • yarn dev: Starts the local development server at http://localhost:4321.
    • yarn build: Builds the production site into the ./dist/ directory.
    • yarn preview: Locally previews the production build before deployment.
    • yarn astro ...: Executes Astro CLI commands (e.g., yarn astro add, yarn astro check).
    • yarn astro -- --help: Displays help information for the Astro CLI.
    yarn dev
yarn build
yarn preview

  11. Use built-in icons in SolidJS

    main

    To use an icon, import it from its specific icon pack subpath (e.g., solid-icons/tb for Tabler Icons). Icons are tree-shakeable and react to prop changes.

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

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

  12. Use the CustomIcon component

    main

    If you want to use your own SVG icons, use the CustomIcon component. It requires a src object containing SVG attributes and the SVG path content.

    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" />;