icons

2024-08-26 13:53:23 +08:00
parent b7913ae47c
commit 5da5cf0c2a
10 changed files with 136 additions and 12 deletions
--- a/.npmrc
+++ b/.npmrc
@ -1,3 +1,3 @@
 registry=https://npm-cf-proxy.oo1.dev
-use-node-version=20.16.0
+use-node-version=20.17.0
 shamefully-hoist=true
--- a/components.d.ts
+++ b/components.d.ts
@ -8,6 +8,9 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    DefineRender: typeof import('./src/components/vue-macros/DefineRender.vue')['default']
+    ICarbonFaceCool: typeof import('~icons/carbon/face-cool')['default']
+    Icons: typeof import('./src/components/Icons.vue')['default']
+    ISvgPacman: typeof import('~icons/svg/pacman')['default']
    ReactivityTransform: typeof import('./src/components/vue-macros/ReactivityTransform.vue')['default']
    ReusableTemplate: typeof import('./src/components/ReusableTemplate.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.37",
    "@iconify/utils": "^2.1.32",
    "@rushstack/eslint-patch": "^1.10.4",
    "@tsconfig/node20": "^20.1.4",
@ -70,6 +71,7 @@
    "typescript": "~5.5.4",
    "unocss": "^0.62.3",
    "unplugin-auto-import": "^0.18.2",
+    "unplugin-icons": "^0.19.2",
    "unplugin-vue-components": "^0.27.4",
    "unplugin-vue-macros": "^2.11.6",
    "unplugin-vue-markdown": "^0.26.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -80,6 +80,9 @@ importers:
        specifier: ^4.4.3
        version: 4.4.3(patch_hash=srtmpgmwmi3z5x3wdppdguh7mi)(vue@3.4.38(typescript@5.5.4))
    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.37
+        version: 1.1.37
      '@iconify/utils':
        specifier: ^2.1.32
        version: 2.1.32
@ -173,6 +176,9 @@ importers:
      unplugin-auto-import:
        specifier: ^0.18.2
        version: 0.18.2(@vueuse/core@10.7.0(vue@3.4.38(typescript@5.5.4)))(rollup@4.21.0)
+      unplugin-icons:
+        specifier: ^0.19.2
+        version: 0.19.2(@vue/compiler-sfc@3.4.38)
      unplugin-vue-components:
        specifier: ^0.27.4
        version: 0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
@ -216,6 +222,9 @@ packages:
    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==, tarball: https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz}
    engines: {node: '>=6.0.0'}

+  '@antfu/install-pkg@0.3.5':
+    resolution: {integrity: sha512-HwIACY0IzrM7FGafMbWZOqEDBSfCwPcylu+GacaRcxJm4Yvvuh3Dy2vZwqdJAzXponc6aLO9FaH4l75pq8/ZSA==, tarball: https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.3.5.tgz}
+
  '@antfu/install-pkg@0.4.0':
    resolution: {integrity: sha512-vI73C0pFA9L+5v+djh0WSLXb8qYQGH5fX8nczaFe1OTI/8Fh03JS1Mov1V7urb6P3A2cBlBqZNjJIKv54+zVRw==, tarball: https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.0.tgz}

@ -699,6 +708,9 @@ packages:
    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==, tarball: https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz}
    deprecated: Use @eslint/object-schema instead

+  '@iconify-json/carbon@1.1.37':
+    resolution: {integrity: sha512-Hj9oZtRmN63yt29YovqgqOJQhaoVMNMTkFLT3HKAJm4HjvI405Juez5UfdysYmLjF708U7gJNx4U6K1k5+fTBw==, tarball: https://registry.npmjs.org/@iconify-json/carbon/-/carbon-1.1.37.tgz}
+
  '@iconify/types@2.0.0':
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==, tarball: https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz}

@ -727,6 +739,10 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==, tarball: https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz}

+  '@jsdevtools/ez-spawn@3.0.4':
+    resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==, tarball: https://registry.npmjs.org/@jsdevtools/ez-spawn/-/ez-spawn-3.0.4.tgz}
+    engines: {node: '>=10'}
+
  '@mdit-vue/plugin-component@2.1.3':
    resolution: {integrity: sha512-9AG17beCgpEw/4ldo/M6Y/1Rh4E1bqMmr/rCkWKmCAxy9tJz3lzY7HQJanyHMJufwsb3WL5Lp7Om/aPcQTZ9SA==, tarball: https://registry.npmjs.org/@mdit-vue/plugin-component/-/plugin-component-2.1.3.tgz}

@ -1505,6 +1521,9 @@ packages:
    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==, tarball: https://registry.npmjs.org/cac/-/cac-6.7.14.tgz}
    engines: {node: '>=8'}

+  call-me-maybe@1.0.2:
+    resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==, tarball: https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz}
+
  callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==, tarball: https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz}
    engines: {node: '>=6'}
@ -2881,6 +2900,10 @@ packages:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==, tarball: https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz}
    engines: {node: '>= 0.8.0'}

+  type-detect@4.1.0:
+    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==, tarball: https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz}
+    engines: {node: '>=4'}
+
  type-fest@0.20.2:
    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==, tarball: https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz}
    engines: {node: '>=10'}
@ -2964,6 +2987,26 @@ packages:
      webpack:
        optional: true

+  unplugin-icons@0.19.2:
+    resolution: {integrity: sha512-QkQJ/Iz3PFr/EoiOvFUQYvqbbJZ7Vs3hObKAFHh5eywTU1PQagSNeXKGRD+JpzXSTnUNLtG0u/xEA5Ec2OeANQ==, tarball: https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.19.2.tgz}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
  unplugin-vue-components@0.27.4:
    resolution: {integrity: sha512-1XVl5iXG7P1UrOMnaj2ogYa5YTq8aoh5jwDPQhemwO/OrXW+lPQKDXd1hMz15qxQPxgb/XXlbgo3HQ2rLEbmXQ==, tarball: https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.27.4.tgz}
    engines: {node: '>=14'}
@ -3284,6 +3327,10 @@ snapshots:
      '@jridgewell/gen-mapping': 0.3.5
      '@jridgewell/trace-mapping': 0.3.25

+  '@antfu/install-pkg@0.3.5':
+    dependencies:
+      '@jsdevtools/ez-spawn': 3.0.4
+
  '@antfu/install-pkg@0.4.0':
    dependencies:
      package-manager-detector: 0.1.2
@ -3698,6 +3745,10 @@ snapshots:

  '@humanwhocodes/object-schema@2.0.3': {}

+  '@iconify-json/carbon@1.1.37':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@iconify/types@2.0.0': {}

  '@iconify/utils@2.1.32':
@ -3738,6 +3789,13 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@jsdevtools/ez-spawn@3.0.4':
+    dependencies:
+      call-me-maybe: 1.0.2
+      cross-spawn: 7.0.3
+      string-argv: 0.3.2
+      type-detect: 4.1.0
+
  '@mdit-vue/plugin-component@2.1.3':
    dependencies:
      '@types/markdown-it': 14.1.2
@ -4770,6 +4828,8 @@ snapshots:

  cac@6.7.14: {}

+  call-me-maybe@1.0.2: {}
+
  callsites@3.1.0: {}

  camelcase@6.3.0: {}
@ -6136,6 +6196,8 @@ snapshots:
    dependencies:
      prelude-ls: 1.2.1

+  type-detect@4.1.0: {}
+
  type-fest@0.20.2: {}

  typescript@5.5.4: {}
@ -6236,6 +6298,20 @@ snapshots:
      rollup: 4.21.0
      vite: 5.4.2(@types/node@22.5.0)(less@4.2.0)

+  unplugin-icons@0.19.2(@vue/compiler-sfc@3.4.38):
+    dependencies:
+      '@antfu/install-pkg': 0.3.5
+      '@antfu/utils': 0.7.10
+      '@iconify/utils': 2.1.32
+      debug: 4.3.6
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      unplugin: 1.12.2
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.4.38
+    transitivePeerDependencies:
+      - supports-color
+
  unplugin-vue-components@0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
    dependencies:
      '@antfu/utils': 0.7.10
--- a/src/assets/icons/svgs/pacman.svg
+++ b/src/assets/icons/svgs/pacman.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="currentColor"><path d="M14.064 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z"/><path fill-rule="evenodd" d="M13 3c2.152 0 4.128.756 5.677 2.016l1.447 1.447l-1.295 1.295h-.001L14.585 12l3.639 3.638l-.002.002l1.905 1.904l-1.413 1.413l-.002-.002A9 9 0 1 1 13 3Zm-1.243 9l5.532 5.532a7 7 0 1 1 0-11.065L11.757 12Z" clip-rule="evenodd"/></g></svg>
--- a/src/components/Icons.vue
+++ b/src/components/Icons.vue
@ -0,0 +1,29 @@
+<template>
+  <div b="1px solid pink" mt-8 text-24 p-8 space-y-8>
+    <!-- https://icon-sets.iconify.design -->
+
+    <div b="1px solid pink" text-24>
+      <div>@iconify-json/carbon/icons.json</div>
+      <div i-carbon-face-cool text-orange />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>Icons({ autoInstall: true })</div>
+      <i-carbon-face-cool class="text-yellow" w-32 h-32 />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>pacman.svg</div>
+      <div class="i-icon:pacman text-(pink)" />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>pacman.svg</div>
+      <i-svg-pacman text-blue w-48 h-48 />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>
--- a/src/main.ts
+++ b/src/main.ts
@ -19,7 +19,7 @@ async function init() {
          transparency: 0.9,
        },
      });
-      eruda.show();
+      // eruda.show();
    });
  }

--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@ -46,4 +46,5 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
  <div b="1px solid pink" mt-8>
    <DefineRender />
  </div>
+  <Icons />
 </template>
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -18,6 +18,7 @@ export default defineConfig({
    },
  ],
  presets: [
+    // TODO: https://github.dev/antfu-collective/vitesse/tree/main/src/components
    presetUno({
      /* prefix: "u-", */
    }),
@ -33,6 +34,7 @@ export default defineConfig({
        display: "inline-block",
        "vertical-align": "middle",
      },*/
+      cdn: 'https://esm.sh/',
      customizations: {
        iconCustomizer(collection, icon, props) {
          props.width = '1em';
@ -40,13 +42,13 @@ export default defineConfig({
        },
      },
      collections: {
-        icon: FileSystemIconLoader('src/assets/uno-svg', (svg) => {
-          // width="200px" height="200.00px"
+        icon: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
          return svg.replace(/#000000|#000/g, 'currentColor');
        }),
+        carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
      },
      warn: true,
-    }),
+    }), // https://unocss.dev/presets/icons
  ],
  transformers: [
    //https://unocss.dev/transformers/variant-group
--- a/vite.config.ts
+++ b/vite.config.ts
@ -9,6 +9,9 @@ import { pinyin } from 'pinyin-pro';
 import type { OutputOptions } from 'rollup';
 import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import IconsResolver from 'unplugin-icons/resolver';
+import Icons from 'unplugin-icons/vite';
 import { TDesignResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import VueMacros from 'unplugin-vue-macros/vite';
@ -126,15 +129,22 @@ function Plugins() {
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
-        TDesignResolver({
-          library: 'mobile-vue',
-          esm: true,
-        }),
-        VantResolver({
-          importStyle: true,
-        }),
+        IconsResolver({
+          customCollections: ['svg'],
+        }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
+        TDesignResolver({ library: 'mobile-vue', esm: true }),
+        VantResolver({ importStyle: true }),
      ],
    }),
+    Icons({
+      compiler: 'vue3',
+      autoInstall: true,
+      customCollections: {
+        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
+          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
+        }),
+      },
+    }),
  );

  plugins.push([vueDevTools()]);
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="currentColor"><path d="M14.064 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z"/><path fill-rule="evenodd" d="M13 3c2.152 0 4.128.756 5.677 2.016l1.447 1.447l-1.295 1.295h-.001L14.585 12l3.639 3.638l-.002.002l1.905 1.904l-1.413 1.413l-.002-.002A9 9 0 1 1 13 3Zm-1.243 9l5.532 5.532a7 7 0 1 1 0-11.065L11.757 12Z" clip-rule="evenodd"/></g></svg>`