gdsi 3.0.2 → 3.0.3

package/README.md

@@ -1,172 +1,189 @@
-# Geist Design System Icons
-A community-maintained collection of Geist Design System icons.
-
-[Online Preview](https://libondev.github.io/geist-design-system-icons/)
-
-## ✨ Features
-- Full tree-shaking support
-- Works across frameworks (Vue/React/Vanilla JS)
-- Auto-imports components
-- Built-in react `memo` optimization
-- And more...
-
-## 📦 Installation
-
-Since 3.0, the adaptation of different language frameworks has been split into corresponding subpackages. We strongly recommend that you install the package corresponding to the language framework instead of this package.
-
-So you can install the following packages:
-
-```sh
-# vue2 | 3
-pnpm add @gdsicon/vue
-
-# react
-pnpm add @gdsicon/react
-
-# vanilla.js
-pnpm add @gdsicon/svg
-```
-
-You can still install this package, but this document is only for 3.0.
-
-## 🚀 Quick Start
-
-### Using Auto-imports
-The easiest way is to use auto-imports:
-- For Vue: Use `unplugin-vue-components`
-- For React: Use `unplugin-auto-import`
-
-> 💡 Remember to add `components.d.ts` / `auto-imports.d.ts` to your `tsconfig.json` includes
-
-```ts
-import IconResolver from '@gdsicon/vue/resolver'
-// react use: import IconResolver from '@gdsicon/vue/resolver'
-// vanilla use: import IconResolver from '@gdsicon/svg/resolver'
-
-import vueComponent from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    vueComponent({
-      resolvers: [
-        IconResolver({
-          /**
-           * auto import prefix
-           * @defaults 'Gds'
-           */
-          prefix: 'Gds',
-        })
-      ],
-    }),
-  ],
-})
-```
-
-Then use it in your components:
-
-```vue
-<template>
-  <div>
-    <GdsAccessibility />
-  </div>
-</template>
-```
-
-### Vanilla JavaScript
-
-```ts
-import { AccessibilityIcon } from '@gdsicon/svg'
-
-const app = document.querySelector('#app')
-
-app.innerHTML = AccessibilityIcon
-```
-
-### Only Single Icon
-
-```ts
-import AccessibilityIcon from '@gdsicon/react/accessibility'
-
-const app = document.querySelector('#app')
-app.innerHTML = AccessibilityIcon
-```
-
-### Full Icons
-Need all icons? You can import the full set:
-
-```ts
-// Note: This method doesn't support tree-shaking
-import * as icons from '@gdsicon/svg'
-
-console.log(icons) // { "AccessibilityIcon": "<svg height=\"16\" stroke-linejoin=\"round\" ..." }
-```
-
-### Framework-specific Usage
-
-#### Vue 3
-
-```html
-<script setup>
-import { AccessibilityIcon } from '@gdsicon/vue'
-</script>
-
-<template>
-  <div>
-    <AccessibilityIcon />
-  </div>
-</template>
-```
-
-### React
-```tsx
-import { AccessibilityIcon } from '@gdsicon/react'
-
-export default function App() {
-  return (
-    <div>
-      <AccessibilityIcon />
-    </div>
-  )
-}
-```
-
-### With unplugin-icons
-```ts
-import GdsiResolver from '@gdsicon/vue/resolver'
-import AutoImport from 'unplugin-auto-import/vite'
-import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    AutoImport({
-      // ...
-      resolvers: [
-        IconsResolver({
-          // ...
-          prefix: 'I'
-        }),
-        GdsiResolver({
-          prefix: 'IGds',
-        }),
-      ],
-    }),
-
-    Icons({
-      compiler: 'vue3',
-    }),
-  ]
-})
-```
-
-```html
-<template>
-  <div>
-    <IGdsAccessibility />
-  </div>
-</template>
-```
-
-enjoy~
+# Geist Design System Icons
+A community-maintained collection of Geist Design System icons.
+
+[Online Preview](https://libondev.github.io/geist-design-system-icons/)
+
+## ✨ Features
+- Full tree-shaking support
+- Works across frameworks (Vue/React/Vanilla JS)
+- Auto-imports components
+- Built-in react `memo` optimization
+- And more...
+
+## 📦 Installation
+
+Since 3.0, the adaptation of different language frameworks has been split into corresponding subpackages. We strongly recommend that you install the package corresponding to the language framework instead of this package.
+
+So you can install the following packages:
+
+```sh
+# vue2 | 3
+pnpm add @gdsicon/vue
+
+# react
+pnpm add @gdsicon/react
+
+# vanilla.js
+pnpm add @gdsicon/svg
+```
+
+You can still install this package, but this document is only for 3.0.
+
+## 🚀 Quick Start
+
+### Using Auto-imports
+The easiest way is to use auto-imports:
+- For Vue: Use `unplugin-vue-components`
+- For React: Use `unplugin-auto-import`
+
+> 💡 Remember to add `components.d.ts` / `auto-imports.d.ts` to your `tsconfig.json` includes
+
+```ts
+import IconResolver from '@gdsicon/vue/resolver'
+// react use: import IconResolver from '@gdsicon/vue/resolver'
+// vanilla use: import IconResolver from '@gdsicon/svg/resolver'
+
+import vueComponent from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vueComponent({
+      resolvers: [
+        IconResolver({
+          /**
+           * auto import prefix
+           * @defaults 'Gds'
+           */
+          prefix: 'Gds',
+        })
+      ],
+    }),
+  ],
+})
+```
+
+Then use it in your components:
+
+```vue
+<template>
+  <div>
+    <GdsAccessibility />
+  </div>
+</template>
+```
+
+### Vanilla JavaScript
+
+```ts
+import { AccessibilityIcon } from '@gdsicon/svg'
+
+const app = document.querySelector('#app')
+
+app.innerHTML = AccessibilityIcon
+```
+
+### Only Single Icon
+
+```ts
+import AccessibilityIcon from '@gdsicon/react/accessibility'
+
+const app = document.querySelector('#app')
+app.innerHTML = AccessibilityIcon
+```
+
+### Full Icons
+Need all icons? You can import the full set:
+
+```ts
+// Note: This method doesn't support tree-shaking
+import * as icons from '@gdsicon/svg'
+
+console.log(icons) // { "AccessibilityIcon": "<svg height=\"16\" stroke-linejoin=\"round\" ..." }
+```
+
+### Framework-specific Usage
+
+#### Vue 3
+
+```html
+<script setup>
+import { AccessibilityIcon } from '@gdsicon/vue'
+</script>
+
+<template>
+  <div>
+    <AccessibilityIcon />
+  </div>
+</template>
+```
+
+### React
+```tsx
+import { AccessibilityIcon } from '@gdsicon/react'
+
+export default function App() {
+  return (
+    <div>
+      <AccessibilityIcon />
+    </div>
+  )
+}
+```
+
+### With unplugin-icons
+```ts
+import GdsiResolver from '@gdsicon/vue/resolver'
+import AutoImport from 'unplugin-auto-import/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    AutoImport({
+      // ...
+      resolvers: [
+        IconsResolver({
+          // ...
+          prefix: 'I'
+        }),
+        GdsiResolver({
+          prefix: 'IGds',
+        }),
+      ],
+    }),
+
+    Icons({
+      compiler: 'vue3',
+    }),
+  ]
+})
+```
+
+```html
+<template>
+  <div>
+    <IGdsAccessibility />
+  </div>
+</template>
+```
+
+## FAQ
+
+### Unknown file extension
+> TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for xxx/node_modules/@gdsicon/vue/dist/accessibility-unread.vue
+
+This situation usually occurs in vue projects. Because it is a directly exported sfc file, the node can't recognize this file, so it only needs to change the file import path to a specific file name.
+
+e.g.
+```js
+import { CopyIcon } from '@gdsicon/vue'
+```
+
+Change to:
+```js
+import CopyIcon from '@gdsicon/vue/copy'
+```
+
+enjoy~

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gdsi",
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Geist design system icons maintained by the community.",
   "author": "Libon <bon.li@outlook.com>",
   "license": "MIT",
@@ -56,9 +56,9 @@
     "dist"
   ],
   "dependencies": {
-    "@gdsicon/react": "1.0.1",
-    "@gdsicon/vue": "1.0.1",
-    "@gdsicon/svg": "1.0.1"
+    "@gdsicon/react": "1.0.2",
+    "@gdsicon/vue": "1.0.2",
+    "@gdsicon/svg": "1.0.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.11.2",