\n\n ???? **Story behind this tool**: [Journey with Icons Continues](https://antfu.me/posts/journey-with-icons-continues) - a blog post by Anthony \n\n |
\n import RawMdiAlarmOff from '~icons/mdi/alarm-off?raw&width=4em&height=4em'\n {{ RawMdiAlarmOff }}\n import RawMdiAlarmOff2 from '~icons/mdi/alarm-off?raw&width=1em&height=1em'\n {{ RawMdiAlarmOff2 }}\n \n \n \n \n\n```\n\n## Custom Icons\n\nFrom `v0.11`, you can now load your own icons!\n\nFrom `v0.13` you can also provide a transform callback to `FileSystemIconLoader`.\n\n```ts\nimport { promises as fs } from 'node:fs'\n\n// loader helpers\nimport { FileSystemIconLoader } from 'unplugin-icons/loaders'\n\nIcons({\n customCollections: {\n // key as the collection name\n 'my-icons': {\n account: '',\n // load your custom icon lazily\n settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),\n /* ... */\n },\n 'my-other-icons': async (iconName) => {\n // your custom loader here. Do whatever you want.\n // for example, fetch from a remote server:\n return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())\n },\n // a helper to load icons from the file system\n // files under `./assets/icons` with `.svg` extension will be loaded as it's file name\n // you can also provide a transform callback to change each icon (optional)\n 'my-yet-other-icons': FileSystemIconLoader(\n './assets/icons',\n svg => svg.replace(/^