Qwik

The Qwik plugin generates Qwik components from your SVG icons.

Usage

monicon.config.ts

import {  } from "@monicon/core/plugins";
import {  } from "@monicon/core";

export default {
  : ["mdi:home", "lucide:heart"],
  : [
    ({
      : "src/components/icons",
      : "Icon",
    }),
  ],
} satisfies ;

Options

`outputPath`

The directory where icon components will be generated.

Type: string | ((icon: Icon) => string | undefined)
Default: "src/components/icons"

import {  } from "@monicon/core/plugins";

// Static path
({ : "src/components/icons" });

// Dynamic path based on icon
({
  : () => {
    if (..("mdi:")) {
      return "src/components/icons/mdi";
    }
    return "src/components/icons";
  },
});

`componentName`

Customize the component name.

Type: (icon: Icon) => string | undefined
Default: ${icon.name}Icon

import {  } from "@monicon/core/plugins";

({
  : () => {
    return `Custom${.}`;
  },
});

`fileName`

Customize the file name.

Type: (icon: Icon) => string | undefined
Default: Slugified icon name

import {  } from "@monicon/core/plugins";

({
  : () => {
    return ..().(":", "-");
  },
});

`prefix`

Add a prefix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: ""

import {  } from "@monicon/core/plugins";

// Static prefix
({ : "Icon" });

// Dynamic prefix
({
  : () => {
    return ..("mdi:") ? "Mdi" : "";
  },
});

`suffix`

Add a suffix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: "Icon"

import {  } from "@monicon/core/plugins";

// Static suffix
({ : "Component" });

// No suffix
({ : "" });

Generated Output

For an icon mdi:home, the plugin generates:

src/components/icons/mdi/home.tsx

import { component$, type QwikIntrinsicElements } from "@builder.io/qwik";

const HomeIcon = component$((props: QwikIntrinsicElements["svg"]) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
      <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
    </svg>
  );
});

export default HomeIcon;

Usage in Components

src/routes/index.tsx

import { component$ } from "@builder.io/qwik";
import HomeIcon from "~/components/icons/mdi/home";
import HeartIcon from "~/components/icons/lucide/heart";

export default component$(() => {
  return (
    <div>
      <HomeIcon class="size-6" />
      <HeartIcon width={24} height={24} color="red" />
    </div>
  );
});

On this page