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 (
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; } `