feat(loader): implement custom loaders (#48)

[oktaysenkan]

Using Custom Loaders

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
import {
  loadLocalCollection,
  loadJSONCollection,
  loadRemoteCollection,
} from "@monicon/loader";

export default defineConfig({
  plugins: [
    react(),
    monicon({
      customCollections: {
        local: loadLocalCollection("../../packages/icons"),
        json: loadJSONCollection(
          "https://gist.githubusercontent.com/oktaysenkan/39681ecdb066dc44c52fa840dacc7562/raw/6aa7b8f8bf9d806742be0e1c4759809391d00bcd/icons.json"
        ),
        remote: loadRemoteCollection({
          download: "https://api.iconify.design/lucide:cloud-download.svg",
          attachment: "https://api.iconify.design/ri:attachment-2.svg",
        }),
      },
    }),
  ],
});

import { Monicon } from "@monicon/react";

function App() {
  return (
    <main>
      <Monicon name="json:network" size={24} />
      <Monicon name="local:folder" size={24} />
      <Monicon name="remote:download" size={24} />
      <Monicon name="remote:attachment" size={24} />
    </main>
  );
}

export default App;

Writing Custom Loader

import { Loader } from "@monicon/loader";

export const fooLoader: Loader<void> = () => () => {
  return {
    bar: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flask-conical"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>',
  };
};

Usage

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";

export default defineConfig({
  plugins: [
    react(),
    monicon({
      customCollections: {
        foo: fooLoader(),
      },
    }),
  ],
});

import { Monicon } from "@monicon/react";

function App() {
  return (
    <main>
      <Monicon name="foo:bar" size={24} />
    </main>
  );
}

export default App;

fixes #48

[changeset-bot]

🦋 Changeset detected

Latest commit: 3d99a2a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@monicon/loader	Patch
@monicon/core	Patch
@monicon/qwik-app	Patch
@monicon/babel-plugin	Patch
@monicon/esbuild	Patch
@monicon/icon-loader	Patch
@monicon/metro	Patch
@monicon/native	Patch
@monicon/nuxt	Patch
@monicon/qwik	Patch
@monicon/react	Patch
@monicon/rollup	Patch
@monicon/rspack	Patch
@monicon/svelte	Patch
@monicon/typescript-config	Patch
@monicon/vite	Patch
@monicon/vue	Patch
@monicon/webpack	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
monicon-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 16, 2024 9:38pm