unplugin · fedorovvvv · Mar 29, 2025 · Mar 29, 2025 · Mar 29, 2025 · Mar 29, 2025
diff --git a/README.md b/README.md
@@ -226,7 +226,8 @@ export default defineConfig({
   ]
 })
 ```
-</details>
+
+<br></details>
 
 <details>
 <summary>Vue CLI</summary><br>
@@ -243,6 +244,7 @@ module.exports = {
 ```
 
 You can also rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`):
+
 ```ts
 // vue.config.mjs
 import Icons from 'unplugin-icons/webpack'
@@ -274,6 +276,7 @@ export default defineConfig({
     sveltekit(),
     Icons({
       compiler: 'svelte',
+      // compiler: 'svelte-snippet', For snippet support
     })
   ]
 })
@@ -283,12 +286,15 @@ Check instructions in the `Frameworks -> Svelte` section below if you faced modu
 
 See [the SvelteKit example](examples/sveltekit) for a working example project.
 
+See [the SvelteKit + Snippet example](examples/sveltekit-snippet) for a working example project.
+
 <br></details>
 
 <details>
 <summary>Svelte + Vite</summary><br>
 
 Svelte support requires the `@sveltejs/vite-plugin-svelte` plugin:
+
 ```shell
 npm i -D @sveltejs/vite-plugin-svelte
 ```
@@ -306,6 +312,7 @@ export default defineConfig({
     svelte(),
     Icons({
       compiler: 'svelte',
+      // compiler: 'svelte-snippet', For snippet support
     }),
   ],
 })
@@ -315,12 +322,15 @@ Check instructions in the `Frameworks -> Svelte` section below if you faced modu
 
 See [the Svelte + Vite example](examples/vite-svelte) for a working example project.
 
+See [the Svelte + Snippet + Vite example](examples/vite-svelte-snippet) for a working example project.
+
 <br></details>
 
 <details>
 <summary>Next.js</summary><br>
 
 The `unplugin-icons` plugin should be configured on `next.config.js` configuration file:
+
 ```ts
 // next.config.js
 /** @type {import('next').NextConfig} */
@@ -340,6 +350,7 @@ module.exports = {
 ```
 
 You can also rename the Next configuration file to `next.config.mjs` and use static import syntax:
+
 ```ts
 // next.config.mjs
 import Icons from 'unplugin-icons/webpack'
@@ -615,6 +626,12 @@ See [the Solid example](examples/vite-solid) for a working example project.
 Icons({ compiler: 'svelte' })
 ```
 
+If you want to use [snippet](https://svelte.dev/docs/svelte/snippet)
+
+```ts
+Icons({ compiler: 'svelte-snippet' })
+```
+
 Type Declarations
 
 For SvelteKit, in the `src/app.d.ts` file:
@@ -623,6 +640,20 @@ For SvelteKit, in the `src/app.d.ts` file:
 import 'unplugin-icons/types/svelte'
 ```
 
+For SvelteKit + Snippet
+
+```ts
+import 'unplugin-icons/types/svelte-snippet'
+```
+
+For Svelte + Snippet + Vite, in the `src/vite-env.d.ts` file:
+
+```js
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/svelte-snippet" />
+```
+
 For Svelte + Vite, in the `src/vite-env.d.ts` file:
 
 ```js
@@ -632,13 +663,15 @@ For Svelte + Vite, in the `src/vite-env.d.ts` file:
 ```
 
 If you're still using Svelte 4, replace the reference to use Svelte 4:
+
 ```js
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
 /// <reference types="unplugin-icons/types/svelte4" />
 ```
 
 If you're still using Svelte 3, replace the reference to use Svelte 3:
+
 ```js
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
@@ -647,6 +680,8 @@ If you're still using Svelte 3, replace the reference to use Svelte 3:
 
 See [the Svelte example](examples/vite-svelte) for a working example project.
 
+See [the Svelte + Snippet example](examples/vite-svelte-snippet) for a working example project.
+
 <br></details>
 
 <details>
@@ -705,6 +740,7 @@ Icons({ compiler: 'qwik' })
 ```
 
 Alternatively, you can use `jsx` compiler, requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:
+
 ```bash
 npm i -D @svgr/core @svgr/plugin-jsx
 ```
@@ -804,6 +840,7 @@ import IconBar from '~icons/my-yet-other-icons/bar'
 ```
 
 > 💡 SVG Authoring Tips:
+>
 > - To make your icons color adaptable, set `fill="currentColor"` or `stroke="currentColor"` in your SVG.
 > - Leave the `height` and `width` unspecified, we will set them for you.
 
@@ -830,6 +867,7 @@ From version `v0.18.3` you can use other packages to load icons from others auth
 **WARNING**: external packages must include `icons.json` file with the `icons` data in `IconifyJSON` format, which can be exported with Iconify Tools. Check [Exporting icon set as JSON package](https://iconify.design/docs/libraries/tools/export/json-package.html) for more details.
 
 For example, you can use `an-awesome-collection` or `@my-awesome-collections/some-collection` to load your custom or third party icons:
+
 ```ts
 // loader helpers
 import { ExternalPackageIconLoader } from 'unplugin-icons/loaders'
@@ -838,6 +876,7 @@ Icons({ customCollections: ExternalPackageIconLoader('my-awesome-collection') })
 ```
 
 When using with resolvers for auto-importing, remember you will need to tell it your custom collection names:
+
 ```ts
 IconResolver({
   customCollections: [
@@ -847,6 +886,7 @@ IconResolver({
 ```
 
 You can also combine it with `FileSystemIconLoader` or with other custom icon loaders:
+
 ```ts
 // loader helpers
 import { ExternalPackageIconLoader, FileSystemIconLoader } from 'unplugin-icons/loaders'
@@ -949,6 +989,7 @@ See `src/App.vue` component and `vite.config.ts` configuration on `vite-vue3` ex
 ## Global Custom Icon Transformation
 
 From version `0.14.2`, when loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:
+
 ```ts
 Icons({
   customCollections: {
@@ -972,7 +1013,7 @@ Icons({
 
 When using this plugin with your custom icons, consider using a cleanup process similar to that done by [Iconify](https://iconify.design/) for any icons sets. All the tools you need are available in [Iconify Tools](https://docs.iconify.design/tools/tools2/).
 
-You can check this repo, using `unplugin-icons` on a `SvelteKit` project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unplugin-svelte.
+You can check this repo, using `unplugin-icons` on a `SvelteKit` project: <https://github.com/iconify/tools/tree/main/%40iconify-demo/unplugin-svelte>.
 
 Read [Cleaning up icons](https://docs.iconify.design/articles/cleaning-up-icons/) article from [Iconify](https://iconify.design/) for more details.
 

diff --git a/examples/sveltekit-snippet/.stackblitz.js b/examples/sveltekit-snippet/.stackblitz.js
@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
diff --git a/examples/sveltekit-snippet/package.json b/examples/sveltekit-snippet/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "sveltekit-snippet-example",
+  "type": "module",
+  "private": true,
+  "description": "unplugin-icons + SvelteKit + Snippet",
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@iconify-json/icon-park": "^1.2.2",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/mdi": "^1.2.3",
+    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.20.1",
+    "svelte-check": "^4.1.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3",
+    "unplugin-icons": "workspace:*"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+  }
+}
diff --git a/examples/sveltekit-snippet/src/app.d.ts b/examples/sveltekit-snippet/src/app.d.ts
@@ -0,0 +1,12 @@
+import 'unplugin-icons/types/svelte-snippet'
+
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {}
diff --git a/examples/sveltekit-snippet/src/app.html b/examples/sveltekit-snippet/src/app.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/examples/sveltekit-snippet/src/routes/+page.svelte b/examples/sveltekit-snippet/src/routes/+page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+import SvelteLogo, { snippet as svelteLogoSnippet } from 'virtual:icons/logos/svelte-icon'
+import MdiStore24Hour, { snippet as mdiStore24HourSnippet } from 'virtual:icons/mdi/store-24-hour'
+import MdiAlarmOff, { snippet as mdiAlarmOffSnippet } from 'virtual:icons/mdi/alarm-off'
+import IconParkAbnormal, { snippet as iconParkAbnormalSnippet } from 'virtual:icons/icon-park/abnormal'
+import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?raw&width=4.25em&height=4.25em'
+import RawMdiAlarmOff2 from 'virtual:icons/mdi/alarm-off?raw&width=1em&height=1em'
+</script>
+
+<main>
+  <SvelteLogo style="font-size:2em" />
+  {@render svelteLogoSnippet({
+    style: "font-size:2em"
+  })}
+
+  <br />
+  <br />
+
+  <MdiStore24Hour />
+  {@render mdiStore24HourSnippet()}
+
+  <MdiAlarmOff />
+  {@render mdiAlarmOffSnippet()}
+
+  <IconParkAbnormal />
+  {@render iconParkAbnormalSnippet()}
+
+  {@html RawMdiAlarmOff}
+  {@html RawMdiAlarmOff2}
+</main>
+
+<style>
+  main {
+    text-align: center;
+  }
+</style>
+
diff --git a/examples/sveltekit-snippet/static/favicon.ico b/examples/sveltekit-snippet/static/favicon.ico
diff --git a/examples/sveltekit-snippet/svelte.config.js b/examples/sveltekit-snippet/svelte.config.js
@@ -0,0 +1,10 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
+
+export default config
diff --git a/examples/sveltekit-snippet/tsconfig.json b/examples/sveltekit-snippet/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/examples/sveltekit-snippet/vite.config.ts b/examples/sveltekit-snippet/vite.config.ts
@@ -0,0 +1,12 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    sveltekit(),
+    Icons({
+      compiler: 'svelte-snippet',
+    }),
+  ],
+})
diff --git a/examples/vite-svelte-snippet/.stackblitz.js b/examples/vite-svelte-snippet/.stackblitz.js
@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
diff --git a/examples/vite-svelte-snippet/index.html b/examples/vite-svelte-snippet/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/examples/vite-svelte-snippet/package.json b/examples/vite-svelte-snippet/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "vite-svelte-snippet",
+  "type": "module",
+  "private": true,
+  "description": "unplugin-icons + Svelte + Snippet (Vite)",
+  "scripts": {
+    "build": "DEBUG='unplugin-icons:*' vite build",
+    "dev": "DEBUG='unplugin-icons:*' vite",
+    "serve": "npm run build && DEBUG='unplugin-icons:*' vite preview",
+    "build-custom": "DEBUG='unplugin-icons:*' CUSTOM_COMPILER=true vite build",
+    "dev-custom": "DEBUG='unplugin-icons:*' CUSTOM_COMPILER=true vite",
+    "serve-custom": "npm run build-custom && DEBUG='unplugin-icons:*' CUSTOM_COMPILER=true vite preview"
+  },
+  "devDependencies": {
+    "@iconify-json/icon-park": "^1.2.2",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/mdi": "^1.2.3",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.20.1",
+    "svelte-check": "^4.1.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.7.3",
+    "unplugin-icons": "workspace:*",
+    "vite": "^6.1.0"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+  }
+}