feat: add strict option for resolver

README.md

@@ -186,6 +186,29 @@ export default defineNuxtConfig({
 })
 ```
 
+Or work with [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) resolvers
+
+```ts
+import ViteComponents from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    'unplugin-icons/nuxt',
+  ],
+  vite: {
+    plugins: [
+      ViteComponents({
+        resolvers: [
+          IconsResolver({/* options */}),
+        ],
+      }),
+    ],
+  },
+})
+```
+
 See [the Nuxt example](examples/nuxt3) for a working example project.
 
 <br></details>

examples/astro/package.json

@@ -2,8 +2,8 @@
   "name": "astro-example",
   "type": "module",
   "version": "0.0.1",
-  "description": "unplugin-icons + Astro",
   "private": true,
+  "description": "unplugin-icons + Astro",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

examples/next/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-example",
-  "description": "unplugin-icons + Next",
   "private": true,
+  "description": "unplugin-icons + Next",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

examples/nuxt3/app.vue

@@ -14,5 +14,8 @@ import MdiAlarmOff from '~icons/mdi/alarm-off'
       <MdiAlarmOff />
       from <code>unplugin-icons</code>
     </p>
+    <h1>Auto import Components</h1>
+    <Circle />
+    <LayoutFooter />
   </div>
 </template>

examples/nuxt3/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

examples/nuxt3/components/Circle.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello Ts Setup Circle</h1>
+</template>

examples/nuxt3/components/LayoutHeader.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello Ts Header</h1>
+</template>

examples/nuxt3/nuxt.config.ts

@@ -1,6 +1,22 @@
+import ViteComponents from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: [
     'unplugin-icons/nuxt',
   ],
+  vite: {
+    plugins: [
+      ViteComponents({
+        resolvers: [
+          IconsResolver({
+            prefix: '',
+            strict: true,
+          }),
+        ],
+        dts: true,
+      }),
+    ],
+  },
 })

examples/nuxt3/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt3-example",
-  "description": "unplugin-icons + Nuxt 3",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Nuxt 3",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -13,7 +13,8 @@
     "@iconify-json/logos": "^1.1.37",
     "@iconify-json/mdi": "^1.1.55",
     "nuxt": "^3.8.1",
-    "unplugin-icons": "link:../.."
+    "unplugin-icons": "link:../..",
+    "unplugin-vue-components": "^0.25.2"
   },
   "stackblitz": {
     "installDependencies": false,

examples/sveltekit/package.json

@@ -1,8 +1,8 @@
 {
   "name": "sveltekit-example",
   "type": "module",
-  "description": "unplugin-icons + SvelteKit",
   "private": true,
+  "description": "unplugin-icons + SvelteKit",
   "scripts": {
     "build": "vite build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

examples/vite-preact/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vite-preact-example",
-  "description": "unplugin-icons + Preact (Vite)",
   "type": "module",
   "version": "0.0.0",
   "private": true,
+  "description": "unplugin-icons + Preact (Vite)",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

examples/vite-qwik/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-qwik-example",
-  "description": "unplugin-icons + Qwik (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Qwik (Vite)",
   "scripts": {
     "build": "qwik build",
     "build.client": "vite build",

examples/vite-react/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vite-react-example",
-  "description": "unplugin-icons + React (Vite)",
   "type": "module",
   "version": "0.0.0",
   "private": true,
+  "description": "unplugin-icons + React (Vite)",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

examples/vite-solid/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-solid-example",
-  "description": "unplugin-icons + Solid (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Solid (Vite)",
   "license": "MIT",
   "scripts": {
     "start": "vite",

examples/vite-svelte/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-svelte",
-  "description": "unplugin-icons + Svelte (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Svelte (Vite)",
   "scripts": {
     "build": "cross-env DEBUG=unplugin-icons:* vite build",
     "dev": "cross-env DEBUG=unplugin-icons:* vite",

examples/vite-vanilla/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-vanilla-example",
-  "description": "unplugin-icons + VanillaJS (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + VanillaJS (Vite)",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

examples/vite-vue2/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-vue2-example",
-  "description": "unplugin-icons + Vue2 (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Vue2 (Vite)",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

examples/vite-vue3-legacy/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-vue3-legacy-example",
-  "description": "unplugin-icons + Vue3 legacy (Vite)",
   "private": true,
+  "description": "unplugin-icons + Vue3 legacy (Vite)",
   "scripts": {
     "dev": "cross-env DEBUG=unplugin-icons:* vite",
     "build": "vite build"

examples/vite-vue3/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-vue3-example",
-  "description": "unplugin-icons + Vue3 (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Vue3 (Vite)",
   "scripts": {
     "dev": "cross-env DEBUG=unplugin-icons:* vite",
     "build": "vite build"

examples/vite-web-components/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-web-components-example",
-  "description": "unplugin-icons + Web Components (Vite)",
   "type": "module",
   "private": true,
+  "description": "unplugin-icons + Web Components (Vite)",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

examples/vue-cli-vue2/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-cli-example",
-  "description": "unplugin-icons + Vue2 (Vue CLI)",
   "private": true,
+  "description": "unplugin-icons + Vue2 (Vue CLI)",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-tsc --noEmit && vue-cli-service build",

src/core/icon-sets.json

@@ -90,6 +90,7 @@
   "iwwa",
   "jam",
   "la",
+  "lets-icons",
   "line-md",
   "logos",
   "ls",
@@ -98,6 +99,7 @@
   "maki",
   "map",
   "material-symbols",
+  "material-symbols-light",
   "mdi",
   "mdi-light",
   "medical-icon",
@@ -106,6 +108,7 @@
   "mi",
   "mingcute",
   "mono-icons",
+  "mynaui",
   "nimbus",
   "nonicons",
   "noto",

src/core/options.ts

@@ -51,7 +51,7 @@ function guessJSX(): ResolvedOptions['jsx'] {
 async function getVueVersion() {
   try {
     const result = await getPackageInfo('vue')
-    if (!result)
+    if (!result || !result.version)
       return null
     return result.version.startsWith('2.') ? 'vue2' : 'vue3'
   }

src/resolver.ts

@@ -45,6 +45,13 @@ export interface ComponentResolverOption {
    * @deprecated renamed to `prefix`
    */
   componentPrefix?: string
+
+  /**
+   * For collections strict matching.
+   * Default is `false`, not side effect.
+   * Set `true` to enable strict matching with `-` suffix for all collections.
+   */
+  strict?: boolean
 }
 
 /**
@@ -59,6 +66,7 @@ export default function ComponentsResolver(options: ComponentResolverOption = {}
     alias = {},
     customCollections = [],
     extension,
+    strict = false,
   } = options
 
   const prefix = rawPrefix ? `${camelToKebab(rawPrefix)}-` : ''
@@ -101,7 +109,7 @@ export default function ComponentsResolver(options: ComponentResolverOption = {}
         return
 
       const slice = kebab.slice(prefix.length)
-      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || collections.find(i => slice.startsWith(i))
+      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || (!strict && collections.find(i => slice.startsWith(i)))
       if (!resolvedCollection)
         return
 

test/__snapshots__/idSvg.test.ts.snap

@@ -1,46 +1,46 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`handleSVGId 1`] = `
 {
   "hasID": true,
   "injectScripts": "const __randId = () => Math.random().toString(36).substr(2, 10);const idMap = {'ssvg-id-vitejsa':'uicons-'+__randId(),'ssvg-id-vitejsb':'uicons-'+__randId()};",
   "svg": "
 <svg
-  width=\\"1.2em\\"
-  height=\\"1.2em\\"
-  preserveAspectRatio=\\"xMidYMid meet\\"
-  viewBox=\\"0 0 256 257\\"
+  width="1.2em"
+  height="1.2em"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 256 257"
 >
   <defs>
     <linearGradient
-      x1=\\"-.828%\\"
-      y1=\\"7.652%\\"
-      x2=\\"57.636%\\"
-      y2=\\"78.411%\\"
-      :id=\\"idMap['ssvg-id-vitejsa']\\"
+      x1="-.828%"
+      y1="7.652%"
+      x2="57.636%"
+      y2="78.411%"
+      :id="idMap['ssvg-id-vitejsa']"
     >
-      <stop stop-color=\\"#41D1FF\\" offset=\\"0%\\"></stop>
-      <stop stop-color=\\"#BD34FE\\" offset=\\"100%\\"></stop>
+      <stop stop-color="#41D1FF" offset="0%"></stop>
+      <stop stop-color="#BD34FE" offset="100%"></stop>
     </linearGradient>
     <linearGradient
-      x1=\\"43.376%\\"
-      y1=\\"2.242%\\"
-      x2=\\"50.316%\\"
-      y2=\\"89.03%\\"
-      :id=\\"idMap['ssvg-id-vitejsb']\\"
+      x1="43.376%"
+      y1="2.242%"
+      x2="50.316%"
+      y2="89.03%"
+      :id="idMap['ssvg-id-vitejsb']"
     >
-      <stop stop-color=\\"#FFEA83\\" offset=\\"0%\\"></stop>
-      <stop stop-color=\\"#FFDD35\\" offset=\\"8.333%\\"></stop>
-      <stop stop-color=\\"#FFA800\\" offset=\\"100%\\"></stop>
+      <stop stop-color="#FFEA83" offset="0%"></stop>
+      <stop stop-color="#FFDD35" offset="8.333%"></stop>
+      <stop stop-color="#FFA800" offset="100%"></stop>
     </linearGradient>
   </defs>
   <path
-    d=\\"M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z\\"
-    :fill=\\"'url(#'+idMap['ssvg-id-vitejsa']+')'\\"
+    d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z"
+    :fill="'url(#'+idMap['ssvg-id-vitejsa']+')'"
   ></path>
   <path
-    d=\\"M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z\\"
-    :fill=\\"'url(#'+idMap['ssvg-id-vitejsb']+')'\\"
+    d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z"
+    :fill="'url(#'+idMap['ssvg-id-vitejsb']+')'"
   ></path>
 </svg>
 ",