Loaders
Remote Collections
Fetch icons directly from remote URLs
Remote Collections in Monicon allow you to fetch and use icons directly from remote URLs. These collections are configured using the loadRemoteCollection function, which maps icon names to their respective URLs. This setup is perfect for integrating third-party or dynamically fetched icons into your project.
Configuration
Add the remote collection loader to your monicon.config.ts:
import { , } from "@monicon/core/plugins";
import { } from "@monicon/core/loaders";
import { } from "@monicon/core";
export default {
: ["mdi:home"],
: {
: ({
: "https://api.iconify.design/lucide:cloud-download.svg",
: "https://api.iconify.design/ri:attachment-2.svg",
: "https://api.iconify.design/simple-icons:github.svg",
}),
},
: [
({ : ["src/components/icons"] }),
({ : "src/components/icons" }),
],
} satisfies ;Usage
After configuration, Monicon will generate components for your remote icons. You can import and use them in your components:
import DownloadIcon from "./components/icons/remote/download";
import AttachmentIcon from "./components/icons/remote/attachment";
import GitHubIcon from "./components/icons/remote/github";
function App() {
return (
<main>
<DownloadIcon className="size-6" />
<AttachmentIcon className="size-6" />
<GitHubIcon className="size-6" />
</main>
);
}
export default App;