From 8d806281c3393bc08cee4c95d203108bbf7a8775 Mon Sep 17 00:00:00 2001
From: Mr-ccyou <1787176370@qq.com>
Date: Mon, 24 Apr 2023 16:34:42 +0800
Subject: [PATCH] feat: react support export svgNames/type SvgName

---
 README.md                                         | 10 ++++++++++
 README.zh_CN.md                                   |  9 +++++++++
 examples/react-vite/src/App.tsx                   |  9 ++++++++-
 examples/react-vite/src/typing/svg-component.d.ts |  2 ++
 src/core/snippets.ts                              |  2 ++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1ee40ee..7b4964b 100644
--- 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
index f5d5ee7..4d8b693 100644
--- 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
index 2dd597c..25a49b7 100644
--- 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
index 4bfe073..de40b7c 100644
--- 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
index fddbe10..5e88750 100644
--- 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;
 }
 `