feat: add new icons

.cz-config.js

@@ -7,12 +7,11 @@ module.exports = {
         { value: 'refactor', name: '♻️refactor:   重构(既不是增加feature，也不是修复bug)' },
         { value: 'perf', name: '⚡️perf:      性能优化' },
         { value: 'test', name: '✅test:      增加测试' },
-        { value: 'chore', name: '🚀chore:     构建过程或辅助工具的变动' },
+        { value: 'chore', name: '🚀chore:     杂类' },
         { value: 'revert', name: '⏪️revert:    回退' },
         { value: 'build', name: '📦️build:     打包' },
         { value: 'ci', name: '👷CI:        自动化' }
     ],
-    // override the messages, defaults are as follows
     messages: {
         type: '请选择提交类型(必选):',
         scope: '请输入文件修改范围(可选):',
@@ -21,7 +20,6 @@ module.exports = {
         footer: '请输入要关闭的issue(待优化去除，跳过即可):',
         confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
     },
-    // used if allowCustomScopes is true
     scopes: [
         { name: 'source' },
         { name: 'examples' },

.gitignore

@@ -41,4 +41,3 @@ packages/vue-next/es
 packages/vue-next/lib
 packages/vue-next/styles
 packages/vue-next/icons.json
-

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v1.0.4(next)
+
+- **feat**: 如何修改，生成的默认span标签，我想i标签作为标签，改如何做呢 [IconPark#389](https://github.com/bytedance/IconPark/issues/389)
+- **feat**: vue 组件 如果找不到图标，回退，或者啥也不显示 [IconPark#418](https://github.com/bytedance/IconPark/issues/418)
+- **feat**: setConfig "IIconConfig" type should be partial [IconPark#348](https://github.com/bytedance/IconPark/issues/348)
+- **fix**: vue3 icon-park/vue-next/es/all 引入 IconPark 组件，该组件不会动态更新传入参数给子组件 [IconPark#451](https://github.com/bytedance/IconPark/issues/451)
+- **add-icon**: Programmer | 程序员
+- **add-icon**: CheckTwo | 校验
+- **add-icon**: CloseTwo | 关闭
+
 ## v1.0.3
 
 - **fix**: 部分图标 无法调整线段粗细 [IconPark#541](https://github.com/bytedance/IconPark/issues/541)

examples/react/package.json

@@ -14,10 +14,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^5.0.2",
-    "vite": "^4.2.0"
+    "vite": "^4.2.1"
   }
 }

examples/react/src/App.tsx

@@ -1,11 +1,23 @@
-import { Home, PersonalPrivacy } from "@icon-space/react";
+import { CheckTwo, CloseTwo, Programmer } from "@icon-space/react";
+import { IconProvider } from "@icon-space/react";
 
 function App() {
 
   return (
     <div className="App">
-        <Home size={72}></Home>
-        <PersonalPrivacy size={72}></PersonalPrivacy>
+        <IconProvider value={{
+            tag: 'i',
+            size: 30,
+            colors: {
+                outline: {
+                    fill: '#ff0000'
+                }
+            }
+        }}>
+            <CheckTwo></CheckTwo>
+            <CloseTwo></CloseTwo>
+            <Programmer></Programmer>
+        </IconProvider>
     </div>
   )
 }

examples/vue3/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        IconHome: typeof import('@icon-space/vue-next')['Home']
+    }
+}

examples/vue3/package.json

@@ -15,7 +15,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
     "typescript": "^5.0.2",
-    "vite": "^4.2.0",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1",
     "vue-tsc": "^1.2.0"
   }
 }

examples/vue3/src/App.vue

@@ -1,19 +1,12 @@
 <template>
   <div>
-      <Home :size="size"></Home>
-      <Zhihu :size="size"></Zhihu>
-      <Bilibili :size="size"></Bilibili>
-      <Juejin :size="size"></Juejin>
-      <Discord :size="size"></Discord>
-      <ExpandAll :size="size"></ExpandAll>
-      <CollapseAll :size="size"></CollapseAll>
+      <IconHome :size="50"></IconHome>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Home, Zhihu, Bilibili, Juejin, Discord, ExpandAll, CollapseAll } from '@icon-space/vue-next'
 
-const size = 50
+
 </script>
 
 <style>

examples/vue3/vite.config.ts

@@ -1,7 +1,19 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue()]
+    plugins: [
+        vue(),
+        Components({
+            resolvers: [
+                // example of importing Vant
+                componentName => {
+                    // where `componentName` is always CapitalCase
+                    if (componentName.startsWith('Icon')) return { name: componentName.slice(4), from: '@icon-space/vue-next' }
+                }
+            ]
+        })
+    ]
 })

package.json

@@ -26,14 +26,14 @@
         "@babel/plugin-transform-modules-commonjs": "^7.21.2",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-react": "^7.18.6",
-        "@commitlint/cli": "^17.4.4",
+        "@commitlint/cli": "^17.5.0",
         "@commitlint/config-conventional": "^17.4.4",
         "@types/gulp": "^4.0.10",
         "@types/gulp-babel": "^6.1.30",
         "@types/gulp-clean-css": "^4.3.0",
         "@types/gulp-less": "^0.0.32",
         "@types/merge2": "^1.4.0",
-        "@types/node": "^18.15.3",
+        "@types/node": "^18.15.10",
         "@vue/babel-plugin-jsx": "^1.1.1",
         "@vue/babel-preset-jsx": "^1.4.0",
         "commitizen": "^4.3.0",
@@ -48,8 +48,8 @@
         "husky": "^8.0.3",
         "merge2": "^1.4.1",
         "minimatch": "^3.1.2",
-        "mkdirp": "^2.1.5",
-        "prettier": "^2.8.4",
+        "mkdirp": "^2.1.6",
+        "prettier": "^2.8.7",
         "ts-node": "^10.9.1",
         "tslib": "^2.5.0",
         "typescript": "^4.9.5",

packages/compiler/src/IconCompiler.ts

@@ -30,19 +30,6 @@ import { JSXGenerator } from './generator/JSXGenerator'
 import { SvgGenerator } from './generator/SvgGenerator'
 import { FixMaskTypeTransformer } from './transformer/FixMaskTypeTransformer'
 
-function getContent(fp: string): string {
-    return fs.readFileSync(path.resolve(__dirname, fp), 'utf8')
-}
-
-const templateVueShimTsx = getContent('./template/vue-shim-tsx.d.ts.txt')
-const templateVueIndex = getContent('./template/vue-index.ts.txt')
-const templateVueAll = getContent('./template/vue-all.ts.txt')
-const templateVueNextIndex = getContent('./template/vue-next-index.ts.txt')
-const templateVueNextAll = getContent('./template/vue-next-all.ts.txt')
-const templateSvgIndex = getContent('./template/svg-index.ts.txt')
-const templateReactIndex = getContent('./template/react-index.ts.txt')
-const templateReactAll = getContent('./template/react-all.ts.txt')
-
 export interface IIconToolsOptions extends IRuntimeOptions {
     author: string
     type: 'react' | 'vue' | 'svg' | 'vue-next'
@@ -111,21 +98,7 @@ export class IconCompiler {
     public getIconFiles(): IIconFile[] {
         const list = Object.keys(this.map).map(key => this.getIconFile(key))
 
-        list.push(this.getRuntimeFile(), this.getMapFile(), this.getIndexFile())
-
-        if (this.options.type !== 'svg') {
-            list.push(this.getLessFile())
-        }
-
-        const allFile = this.getAllFile()
-        if (allFile) {
-            list.push(allFile)
-        }
-
-        const shimFile = this.getShimTsxFile()
-        if (shimFile) {
-            list.push(shimFile)
-        }
+        list.push(this.getMapFile())
 
         return list
     }
@@ -188,56 +161,6 @@ export class IconCompiler {
         return generator.process()
     }
 
-    // 获取index文件
-    public getIndexFile(): IIconFile {
-        let content: string = ''
-        if (this.options.type === 'vue') {
-            content = templateVueIndex
-        } else if (this.options.type === 'vue-next') {
-            content = templateVueNextIndex
-        } else if (this.options.type === 'react') {
-            content = templateReactIndex
-        } else if (this.options.type === 'svg') {
-            content = templateSvgIndex
-        }
-        return {
-            mime: 'text/javascript',
-            path: 'index.' + (this.options.useType ? 'ts' : 'js'),
-            content: content
-        }
-    }
-
-    // 获取all文件
-    public getAllFile(): IIconFile | null {
-        let content: string = ''
-        if (this.options.type === 'vue') {
-            content = templateVueAll
-        } else if (this.options.type === 'vue-next') {
-            content = templateVueNextAll
-        } else if (this.options.type === 'react') {
-            content = templateReactAll
-        } else if (this.options.type === 'svg') {
-            return null
-        }
-        return {
-            mime: 'text/javascript',
-            path: 'all.' + (this.options.useType ? 'ts' : 'js'),
-            content: content
-        }
-    }
-
-    // 获取shim-tsx文件
-    public getShimTsxFile(): IIconFile | null {
-        if (this.options.type !== 'vue') {
-            return null
-        }
-        return {
-            mime: 'text/javascript',
-            path: 'shim-tsx.d.' + (this.options.useType ? 'ts' : 'js'),
-            content: templateVueShimTsx
-        }
-    }
-
     private createCompiler(): IconCompilerFunc {
         const {
             options: { type, colors = [], stroke = 0, fixedSize = false, style = false, strokeLinecap, strokeLinejoin }

packages/compiler/src/generator/VueNextRuntimeGenerator.ts

@@ -4,8 +4,27 @@ export class VueNextRuntimeGenerator extends RuntimeGenerator {
     protected processPlatformImports(): void {
         if (this.useType) {
             this.writeLine("import {ComponentOptions, DefineComponent, inject, provide} from '@vue/runtime-dom';")
-        } else {
-            this.writeLine("import React, {createContext, useContext, useMemo} from 'react';")
+            this.writeLine()
+            this.writeLine('type NonAny = number | boolean | string | symbol | null;')
+            this.writeLine(`type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[]
+        ? T[P]
+        : T[P] extends ReadonlyArray<NonAny> // checks for nested ReadonlyArray<any>
+            ? T[P]
+            : T[P] extends Date // checks for Date
+                ? T[P]
+                : T[P] extends (infer U)[]
+                    ? DeepPartial<U>[]
+                    : T[P] extends ReadonlyArray<infer U>
+                        ? ReadonlyArray<DeepPartial<U>>
+                        : T[P] extends Set<infer V> // checks for Sets
+                            ? Set<DeepPartial<V>>
+                            : T[P] extends Map<infer K, infer V> // checks for Maps
+                                ? Map<K, DeepPartial<V>>
+                                : T[P] extends NonAny // checks for primative values
+                                    ? T[P]
+                                    : DeepPartial<T[P]>; // recurse for all non-array, non-date and non-primative values
+};`)
         }
 
         this.writeLine()
@@ -40,7 +59,7 @@ export class VueNextRuntimeGenerator extends RuntimeGenerator {
         this.writeLine()
 
         this.writeLine('// 图标配置Provider')
-        this.writeLine(`export const ${this.getTypeName('provider')} = (config: ${this.getInterfaceName('config')}) => {`)
+        this.writeLine(`export const ${this.getTypeName('provider')} = (config: DeepPartial<${this.getInterfaceName('config')}>) => {`)
         this.indent(1)
         this.writeLine(`provide(${this.getTypeName('context')}, config)`)
         this.indent(-1)