feat(source): add new icons

icon-space · Mar 20, 2023 · 116dbe7 · 116dbe7
1 parent ebf84e8
commit 116dbe7
Show file tree

Hide file tree

Showing 42 changed files with 1,321 additions and 1,074 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,19 @@
 # Changelog
 
-## v1.0.2
+## v1.0.3(next)
+
+- **fix**: 部分图标 无法调整线段粗细 [IconPark#541](https://github.com/bytedance/IconPark/issues/541)
+- **add-icon**: Markdown 
+- **add-icon**: FileMarkdown
+- **add-icon**: Gif
+- **add-icon**: Ico
+- **add-icon**: Jpg
+- **add-icon**: Png
+- **add-icon**: Svg
+- **add-icon**: Mp3
+- **add-icon**: Mp4
 
-> 2023.03.06
+## v1.0.2
 
 - **fix**: 图标名称错误 [IconPark#539](https://github.com/bytedance/IconPark/issues/539)
 - **fix**: 行内公式和块公式搞反 [IconPark#552](https://github.com/bytedance/IconPark/issues/552)
@@ -20,8 +31,6 @@
 
 ## v1.0.1
 
-> 2023.03.01
-
 - **fix**: outStrokeColor has no effect on the icon [#4](https://github.com/icon-space/IconSpace/issues/4)
 
 - **add-icon**: Paid - 已付款
@@ -35,6 +44,4 @@
 
 ## v1.0.0
 
-> 2023.02.26
-
 - **init**: fork iconpark
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@icon-space/react": "workspace:1.0.2",
+    "@icon-space/react": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4"
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0"
   }
 }
diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts
@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+    plugins: [react()]
 })
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@icon-space/vue-next": "workspace:1.0.2",
+    "@icon-space/vue-next": "workspace:*",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0",
     "vue-tsc": "^1.2.0"
   }
 }
diff --git a/examples/vue3/vite.config.ts b/examples/vue3/vite.config.ts
@@ -3,5 +3,5 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+    plugins: [vue()]
 })
diff --git a/gulpfile.ts b/gulpfile.ts
@@ -115,14 +115,12 @@ function createBuildTask(name: 'react' | 'vue' | 'svg' | 'vue-next'): string {
     const cwd = path.resolve(process.cwd(), 'packages/', name)
 
     gulp.task('build-script-' + name, () => {
-
         const result = gulp
             .src(['src/*.ts', 'src/*.tsx', 'src/**/*.ts', 'src/**/*.tsx'], {
                 cwd
             })
             .pipe(ts(TS_CONFIG_MAP[name].compilerOptions))
 
-
         const jsResultStream = result.js
         const dtsResultStream = result.dts
 
@@ -162,12 +160,4 @@ function createBuildTask(name: 'react' | 'vue' | 'svg' | 'vue-next'): string {
     return 'build-' + name
 }
 
-gulp.task(
-    'default',
-    gulp.parallel(
-        createBuildTask('react'),
-        createBuildTask('vue'),
-        createBuildTask('svg'),
-        createBuildTask('vue-next'),
-    )
-)
+gulp.task('default', gulp.parallel(createBuildTask('react'), createBuildTask('vue'), createBuildTask('svg'), createBuildTask('vue-next')))
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
         "@icon-space/compiler": "workspace:^0.0.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.0",
+        "@babel/core": "^7.21.3",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-transform-modules-commonjs": "^7.21.2",
         "@babel/preset-env": "^7.20.2",
@@ -33,12 +33,12 @@
         "@types/gulp-clean-css": "^4.3.0",
         "@types/gulp-less": "^0.0.32",
         "@types/merge2": "^1.4.0",
-        "@types/node": "^18.14.4",
+        "@types/node": "^18.15.3",
         "@vue/babel-plugin-jsx": "^1.1.1",
         "@vue/babel-preset-jsx": "^1.4.0",
         "commitizen": "^4.3.0",
-        "csv-parse": "^4.16.3",
-        "csv-stringify": "^6.2.4",
+        "csv-parse": "^5.3.6",
+        "csv-stringify": "^6.3.0",
         "cz-customizable": "^7.0.0",
         "gulp": "^4.0.2",
         "gulp-babel": "^8.0.0",
@@ -47,11 +47,12 @@
         "gulp-typescript": "6.0.0-alpha.1",
         "husky": "^8.0.3",
         "merge2": "^1.4.1",
-        "minimatch": "^5.1.6",
-        "mkdirp": "^2.1.4",
+        "minimatch": "^3.1.2",
+        "mkdirp": "^2.1.5",
         "prettier": "^2.8.4",
         "ts-node": "^10.9.1",
         "tslib": "^2.5.0",
-        "typescript": "^4.9.5"
+        "typescript": "^4.9.5",
+        "x2js": "^3.4.4"
     }
 }
diff --git a/packages/compiler/src/IconCompiler.ts b/packages/compiler/src/IconCompiler.ts
@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from 'fs'
+import path from 'path'
 import { compiler } from './compiler'
 import { IndexGenerator } from './generator/IndexGenerator'
 import { LessGenerator } from './generator/LessGenerator'
@@ -30,8 +30,7 @@ import { JSXGenerator } from './generator/JSXGenerator'
 import { SvgGenerator } from './generator/SvgGenerator'
 import { FixMaskTypeTransformer } from './transformer/FixMaskTypeTransformer'
 
-
-function getContent(fp: string):string {
+function getContent(fp: string): string {
     return fs.readFileSync(path.resolve(__dirname, fp), 'utf8')
 }
 

diff --git a/packages/compiler/src/generator/RuntimeGenerator.ts b/packages/compiler/src/generator/RuntimeGenerator.ts
@@ -568,7 +568,11 @@ export abstract class RuntimeGenerator extends Generator {
                             if (fill.currentColor) {
                                 this.write("'currentColor'")
                             } else {
-                                this.write(`config.colors.${camelCase(theme.name)}.${camelCase(fill.name)}.trim().length ? config.colors.${camelCase(theme.name)}.${camelCase(fill.name)} : 'currentColor'`)
+                                this.write(
+                                    `config.colors.${camelCase(theme.name)}.${camelCase(fill.name)}.trim().length ? config.colors.${camelCase(theme.name)}.${camelCase(
+                                        fill.name
+                                    )} : 'currentColor'`
+                                )
                             }
                         }
 

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -5,29 +5,34 @@
 ## Introduction
 
 ### Features
-* Provide more than 2000 icons
-* Provide 4 themes:
-    * outline
-    * filled
-    * two-tone
-    * multi-color
+
+-   Provide more than 2000 icons
+-   Provide 4 themes:
+    -   outline
+    -   filled
+    -   two-tone
+    -   multi-color
 
 ### More
+
 Please visit [IconSpace](https://icon-space.github.io/doc/)
-* Copy SVG
-* Copy React Icon component
-* Copy Vue Icon component
-* Download PNG
-* Download SVG
+
+-   Copy SVG
+-   Copy React Icon component
+-   Copy Vue Icon component
+-   Download PNG
+-   Download SVG
 
 ## Getting Started
+
 ### Install
 
 ```
 npm install @icon-space/react --save
 ```
 
 ### Include Component
+
 Import an icon from `@icon-space/react`at the top of a component and then use it in the render function:
 
 ```
@@ -39,31 +44,34 @@ import {Home} from '@icon-space/react';
 ```
 
 ### Style Sheet
+
 Import the icon style:
+
 ```typescript
-import '@icon-space/react/styles/index.css';
+import '@icon-space/react/styles/index.css'
 ```
+
 Or
 
 ```typescript
-import '@icon-space/react/styles/index.less';
+import '@icon-space/react/styles/index.less'
 ```
 
 ### Global Config
+
 You can use `IconProvider` in `@icon-space/react` to set the default config globally:
 
 ```typescript jsx
-import {IconProvider, DEFAULT_ICON_CONFIGS} from '@icon-space/react'
-import {Home} from '@icon-space/react';
+import { IconProvider, DEFAULT_ICON_CONFIGS } from '@icon-space/react'
+import { Home } from '@icon-space/react'
 
-const IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}
+const IconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon' }
 
 function App() {
-
     return (
         <IconProvider value={IconConfig}>
-            <Home/>
-            <Home theme="filled"/>
+            <Home />
+            <Home theme="filled" />
         </IconProvider>
     )
 }
@@ -74,6 +82,7 @@ function App() {
 You can use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import icons on demand.
 
 Set config like this:
+
 ```json
 {
     "plugins": [
@@ -82,26 +91,26 @@ Set config like this:
             {
                 "libraryName": "@icon-space/react",
                 "libraryDirectory": "es/icons",
-                "camel2DashComponentName": false 
+                "camel2DashComponentName": false
             }
         ]
     ]
 }
 ```
 
 ### Icon Component
+
 We recommend loading icons on demand, because this can greatly reduce the volume of compiled code。
 However, in some scenarios similar to remote loading menus, direct reference to all icons can reduce the development cost.
 
 Usage:
 
 ```typescript jsx
-import Icon, {IconType} from '@icon-space/react/es/all';
-import React, {Fragment} from 'react';
+import Icon, { IconType } from '@icon-space/react/es/all'
+import React, { Fragment } from 'react'
 
-export function Demo(props: {type: IconType}): JSX.Element {
-
-    const {type} = props;
+export function Demo(props: { type: IconType }): JSX.Element {
+    const { type } = props
 
     return (
         <Fragment>
@@ -112,20 +121,18 @@ export function Demo(props: {type: IconType}): JSX.Element {
     )
 }
 ```
+
 You can do this when you are not sure whether the `type` property is legal:
 
 ```typescript jsx
-import Icon, {ALL_ICON_KEYS, IconType} from '@icon-space/react/es/all';
-import React, {Fragment} from 'react';
+import Icon, { ALL_ICON_KEYS, IconType } from '@icon-space/react/es/all'
+import React, { Fragment } from 'react'
 
-export function Demo(props: {type: IconType}): JSX.Element {
+export function Demo(props: { type: IconType }): JSX.Element {
+    const { type } = props
 
-    const {type} = props;
-
-    if(ALL_ICON_KEYS.indexOf(type) < 0) {
-        return (
-            <span>Not Exists</span>
-        );
+    if (ALL_ICON_KEYS.indexOf(type) < 0) {
+        return <span>Not Exists</span>
     }
 
     return (
@@ -137,25 +144,28 @@ export function Demo(props: {type: IconType}): JSX.Element {
     )
 }
 ```
+
 ### Embed IconSpace in your project
+
 If you need to use additional information such as icon name, author, category, label and creation time, you can use the `icons.json` file located in the root directory of each NPM.
 
 ## Props
 
-|    prop	 | description  | type  | default | note |
-| ---------- | --- | --- | --- | --- |
-| theme |  Theme of the icons.  | 'outline' &#124; 'filled' &#124; 'two-tone' &#124; 'multi-color' | 'outline'  |
-| size |  The width/height of the icon | number &#124; string |  '1em' |
-| spin |  Rotate icon with animation | boolean | false |
-| fill |  Colors of theme | string  &#124; string[] |  'currentColor' |
-| strokeLinecap |  the stroke-linecap prop of svg element | 'butt' &#124; 'round' &#124; 'square' |  'round' |
-| strokeLinejoin |  the stroke-linejoin prop of svg element | 'miter' &#124; 'round' &#124; 'bevel' |  'round' |
-| strokeWidth |  the stroke-width prop of svg element | number |  4 |
+| prop           | description                             | type                                                             | default        | note |
+| -------------- | --------------------------------------- | ---------------------------------------------------------------- | -------------- | ---- |
+| theme          | Theme of the icons.                     | 'outline' &#124; 'filled' &#124; 'two-tone' &#124; 'multi-color' | 'outline'      |
+| size           | The width/height of the icon            | number &#124; string                                             | '1em'          |
+| spin           | Rotate icon with animation              | boolean                                                          | false          |
+| fill           | Colors of theme                         | string &#124; string[]                                           | 'currentColor' |
+| strokeLinecap  | the stroke-linecap prop of svg element  | 'butt' &#124; 'round' &#124; 'square'                            | 'round'        |
+| strokeLinejoin | the stroke-linejoin prop of svg element | 'miter' &#124; 'round' &#124; 'bevel'                            | 'round'        |
+| strokeWidth    | the stroke-width prop of svg element    | number                                                           | 4              |
 
 **Other props**
 
 You can use all props which are defined in `HTMLAttributes<HTMLSpanElement>>`, such as:
-* className
-* style
-* onClick
-* ...
+
+-   className
+-   style
+-   onClick
+-   ...