Merge branch 'release'

docs/guide/other.md

@@ -18,7 +18,7 @@ yarn global add @yzfe/svgicon-viewer
 svgicon-viewer ./src/assets/svg
 ```
 
-![svgicon-viewer](../../images/svgicon-viewer.png)
+![svgicon-viewer](../svgicon-viewer.png)
 
 Use meta.json to add additional information. Currently, only one name field is supported, which can be used to describe the icon.
 
@@ -35,7 +35,7 @@ Use meta.json to add additional information. Currently, only one name field is s
 svgicon-viewer ./src/assets/svg ./src/assets/svg/meta.json
 ```
 
-![svgicon-viewer](../../images/svgicon-viewer-meta.png)
+![svgicon-viewer](../svgicon-viewer-meta.png)
 
 ### Generate static html page
 

docs/zh/guide/other.md

@@ -17,7 +17,7 @@ yarn global add @yzfe/svgicon-viewer
 # svgicon-viewer <svgFilePath> [metaFile]
 svgicon-viewer ./src/assets/svg
 ```
-![svgicon-viewer](../../images/svgicon-viewer.png)
+![svgicon-viewer](../../svgicon-viewer.png)
 
 ### meta.json
 使用 meta.json 可以添加额外的信息，目前只支持一个 name 字段，可以用来描述图标。默认读取 SVG 文件路径下的 meta.json
@@ -36,7 +36,7 @@ svgicon-viewer ./src/assets/svg
 svgicon-viewer ./src/assets/svg ./src/assets/svg/meta.json
 ```
 
-![svgicon-viewer](../../images/svgicon-viewer-meta.png)
+![svgicon-viewer](../../svgicon-viewer-meta.png)
 
 ### 输出静态 html 页面
 添加 --output (alias: -o) 会生成静态 html 页面到指定的输出目录

packages/react-svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/react-svgicon",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "SVG icon component for react",
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
@@ -27,7 +27,7 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.5",
         "@types/react": "^18.2.15",
-        "@yzfe/svgicon": "^1.2.0",
+        "@yzfe/svgicon": "^1.2.1",
         "rollup": "^4.0.2",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2"

packages/react-svgicon/src/index.tsx

@@ -44,6 +44,20 @@ class ReactSvgIcon extends React.PureComponent<ComponentProps> {
     }
 }
 
+function createIconComponent(data: Icon) {
+    const name = (data.name.split('/').pop() || '').replace(/^[\\d_]+/, '')
+
+    const Component: ReactSvgIconFC = (props) => {
+        return <ReactSvgIcon {...props} data={data} />
+    }
+
+    Component.displayName = name
+    Component.iconName = data.name
+    Component.iconData = data.data
+
+    return Component
+}
+
 /** SvgIcon function component, define in @yzfe/svgicon-loader compile */
 interface ReactSvgIconFC extends React.FC<ComponentProps> {
     iconName: string
@@ -53,6 +67,7 @@ interface ReactSvgIconFC extends React.FC<ComponentProps> {
 export {
     ReactSvgIcon,
     ReactSvgIconFC,
+    createIconComponent,
     Props,
     Options,
     Icon,

packages/svgicon-gen/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/svgicon-gen",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "A generator to create svgicon object",
     "scripts": {
         "dev": "rollup -c --bundleConfigAsCjs -w",

packages/svgicon-loader/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/svgicon-loader",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Webpack loader to load svg icon",
     "scripts": {
         "dev": "tsc -w",
@@ -46,7 +46,7 @@
         "webpack": "4"
     },
     "dependencies": {
-        "@yzfe/svgicon-gen": "^1.3.0",
+        "@yzfe/svgicon-gen": "^1.3.1",
         "loader-utils": "^2.0.0"
     },
     "publishConfig": {

packages/svgicon-polyfill/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/svgicon-polyfill",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "SVGElement innerHTML polyfill",
     "keywords": [
         "SVG",

packages/svgicon-viewer/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/svgicon-viewer",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Preview SVG Icon",
     "bin": "bin/index.js",
     "scripts": {
@@ -30,7 +30,7 @@
         "url": "https://github.com/MMF-FE/svgicon/issues"
     },
     "dependencies": {
-        "@yzfe/svgicon-gen": "^1.3.0",
+        "@yzfe/svgicon-gen": "^1.3.1",
         "fastify": "^3.2.0",
         "fastify-static": "^3.2.0",
         "fs-extra": "^11.1.1",
@@ -42,8 +42,8 @@
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "@vitejs/plugin-react": "^4.0.3",
-        "@yzfe/react-svgicon": "^1.2.0",
-        "@yzfe/svgicon": "^1.2.0",
+        "@yzfe/react-svgicon": "^1.2.1",
+        "@yzfe/svgicon": "^1.2.1",
         "antd": "^5.11.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

packages/svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/svgicon",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "Svg icon",
     "main": "dist/index.js",
     "module": "dist/index.esm.js",

packages/taro-svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/taro-svgicon",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "SVG icon component for miniapp",
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
@@ -32,7 +32,7 @@
         "@tarojs/runtime": "3.0.21",
         "@tarojs/taro": "3.0.21",
         "@types/react": "^16.9.46",
-        "@yzfe/svgicon": "^1.2.0",
+        "@yzfe/svgicon": "^1.2.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-element-to-jsx-string": "^14.3.2",

packages/vite-plugin-svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vite-plugin-svgicon",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "exports": {
@@ -20,6 +20,9 @@
     ],
     "author": "Allenice Mo <[email protected]>",
     "homepage": "https://github.com/MMF-FE/svgicon",
+    "files": [
+        "dist"
+    ],
     "scripts": {
         "dev": "rollup -c --bundleConfigAsCjs -w",
         "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",
@@ -30,18 +33,8 @@
         "access": "public"
     },
     "peerDependencies": {
-        "@yzfe/react-svgicon": ">=1.0.0",
-        "@yzfe/vue-svgicon": ">=1.0.0",
         "vite": ">=2.0.0-beta.1"
     },
-    "peerDependenciesMeta": {
-        "@yzfe/react-svgicon": {
-            "optional": true
-        },
-        "@yzfe/vue-svgicon": {
-            "optional": true
-        }
-    },
     "devDependencies": {
         "@rollup/plugin-commonjs": "^25.0.5",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -54,7 +47,7 @@
     },
     "dependencies": {
         "@types/svgo": "^2.6.3",
-        "@yzfe/svgicon-gen": "^1.3.0",
+        "@yzfe/svgicon-gen": "^1.3.1",
         "minimatch": "^9.0.3"
     }
 }

packages/vite-plugin-svgicon/src/index.ts

@@ -66,36 +66,14 @@ async function genSvgIcon(
     switch (options.component) {
         case 'react':
             result += `
-            import React from 'react'
-            import { ReactSvgIcon } from '@yzfe/react-svgicon'
-            function SvgIconFC (props) {
-                return React.createElement(ReactSvgIcon, {
-                    ...props,
-                    data
-                })
-            }
-
-            SvgIconFC.iconName = data.name
-            SvgIconFC.iconData = data.data
-            export default SvgIconFC
+            import { createIconComponent } from '@yzfe/react-svgicon'
+            export default createIconComponent(data)
         `
             break
         case 'vue':
             result += `
-            import { defineComponent, h} from 'vue'
-            import { VueSvgIcon } from '@yzfe/vue-svgicon'
-            const name = (data.name.split('/').pop() || '').replace(/^[\\d_]+/, '')
-            const componentName = name || 'SvgIcon'
-
-            export default defineComponent({
-                name: componentName,
-                setup() {
-                    return {}
-                },
-                render() {
-                    return h(VueSvgIcon, {...this.$attrs, data})
-                }
-            })
+            import { createIconComponent } from '@yzfe/vue-svgicon'
+            export default createIconComponent(data)
         `
             break
         case 'custom':

packages/vue-cli-plugin-svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/vue-cli-plugin-svgicon",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "vue-cli plugin to add @yzfe/svgicon-loader config",
     "keywords": [
         "vue",
@@ -21,9 +21,9 @@
         "lodash": "^4.17.20"
     },
     "devDependencies": {
-        "@yzfe/svgicon": "^1.2.0",
-        "@yzfe/svgicon-loader": "^1.3.0",
-        "@yzfe/vue-svgicon": "^5.0.0"
+        "@yzfe/svgicon": "^1.2.1",
+        "@yzfe/svgicon-loader": "^1.3.1",
+        "@yzfe/vue-svgicon": "^5.0.1"
     },
     "gitHead": "8e9d9860c893bcce8e8e6c0c48a22eec8ed72013"
 }

packages/vue-svgicon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yzfe/vue-svgicon",
-    "version": "5.0.0",
+    "version": "5.0.1",
     "description": "SVG icon component for vue",
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
@@ -48,14 +48,14 @@
         "@rollup/plugin-typescript": "^11.1.5",
         "@vitejs/plugin-vue": "^4.5.2",
         "@vue/test-utils": "^2.4.3",
-        "@yzfe/svgicon": "^1.2.0",
+        "@yzfe/svgicon": "^1.2.1",
         "jsdom": "^23.0.1",
         "rollup": "^4.0.2",
         "rollup-plugin-dts": "^6.1.0",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2",
         "vite": "^5.0.9",
-        "vite-plugin-svgicon": "^2.1.0",
+        "vite-plugin-svgicon": "^2.1.1",
         "vitest": "^1.0.4",
         "vue": "^3.0.0",
         "vue2": "npm:vue@^2.7.15"

packages/vue-svgicon/src/index.ts

@@ -1,14 +1,6 @@
 import { defineComponent, h, App, PropType, isVue2 } from 'vue-demi'
 
-import {
-    svgIcon,
-    Props,
-    Options,
-    setOptions,
-    getOptions,
-    Icon,
-    IconData,
-} from '@yzfe/svgicon'
+import { svgIcon, Options, setOptions, getOptions, Icon } from '@yzfe/svgicon'
 
 const VueSvgIcon = defineComponent({
     props: {
@@ -54,6 +46,7 @@ const VueSvgIcon = defineComponent({
         const result = svgIcon(this.$props)
 
         if (isVue2) {
+            // https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
             return createElement('svg', {
                 attrs: {
                     viewBox: result.box,
@@ -87,12 +80,31 @@ const VueSvgIconPlugin = {
     },
 }
 
-export {
-    VueSvgIcon,
-    VueSvgIconPlugin,
-    setOptions,
-    Props,
-    Options,
-    Icon,
-    IconData,
+function createIconComponent(data: Icon) {
+    const name = (data.name.split('/').pop() || '').replace(/^[\\d_]+/, '')
+    const componentName = name || 'SvgIcon'
+
+    return defineComponent({
+        name: componentName,
+        setup() {
+            return {}
+        },
+        render(createElement: any) {
+            if (isVue2) {
+                return createElement(VueSvgIcon, {
+                    attrs: this.$attrs,
+                    props: {
+                        data,
+                        ...this.$attrs,
+                    },
+                    // @ts-ignore
+                    on: this.$listeners,
+                })
+            }
+            return h(VueSvgIcon, { ...this.$attrs, data })
+        },
+    })
 }
+
+export type { Props, Options, Icon, IconData } from '@yzfe/svgicon'
+export { VueSvgIcon, VueSvgIconPlugin, createIconComponent, setOptions }