feat: react support export svgNames/type SvgName

Jevon617 · Apr 24, 2023 · 8d80628 · 8d80628
1 parent 37a4e44
commit 8d80628
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -143,6 +143,16 @@ function App() {
 }
 ```
 
+### Get `svgNames` / type `SvgName`
+
+```ts
+// all svg icon name
+import { svgNames } from '~virtual/svg-component'
+
+// type SvgName = "icon-icon-addUser" | "icon-icon-barCode"
+import type { SvgName } from '~virtual/svg-component'
+```
+
 ## Plugin Configuration
 
 | Parameter             | Type                       | Default                                        | Description                                         |

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -142,6 +142,15 @@ function App() {
 }
 ```
 
+### 获取`svgNames` / 类型 `SvgName`
+```ts
+// all svg icon name
+import { svgNames } from '~virtual/svg-component'
+
+// type SvgName = "icon-icon-addUser" | "icon-icon-barCode"
+import type { SvgName } from '~virtual/svg-component'
+```
+
 ## 插件配置
 
 | 属性                   | 类型                        | 默认值                                          | 描述                                                |

diff --git a/examples/react-vite/src/App.tsx b/examples/react-vite/src/App.tsx
@@ -1,6 +1,13 @@
 import './App.css'
-import MySvgIcon from '~virtual/svg-component'
+import type { SvgName } from '~virtual/svg-component'
 
+import MySvgIcon, { svgNames } from '~virtual/svg-component'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const test: SvgName = 'icon-react'
+
+// eslint-disable-next-line no-console
+console.log(svgNames)
 function App() {
   return (
     <div className="logo">

diff --git a/examples/react-vite/src/typing/svg-component.d.ts b/examples/react-vite/src/typing/svg-component.d.ts
@@ -1,5 +1,7 @@
 
 declare module '~virtual/svg-component' {
   const MySvgIcon: ({name}: {name: "icon-icon-addUser" | "icon-icon-barCode" | "icon-icon-card2" | "icon-react"})=> JSX.Element;
+  export const svgNames: ["icon-icon-addUser" , "icon-icon-barCode" , "icon-icon-card2" , "icon-react"];
+  export type SvgName = "icon-icon-addUser" | "icon-icon-barCode" | "icon-icon-card2" | "icon-react";
   export default MySvgIcon;
 }
diff --git a/src/core/snippets.ts b/src/core/snippets.ts
@@ -71,6 +71,8 @@ export default function $component_name({name}) {
 export const reactDts = `
 declare module '${MODULE_NAME}' {
   const $component_name: ({name}: {name: "$svg_symbolIds"})=> JSX.Element;
+  export const svgNames: ["$svg_names"];
+  export type SvgName = "$svg_symbolIds";
   export default $component_name;
 }
 `