bytedance · AppleMonkey2019 · Dec 26, 2020 · Dec 26, 2020
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -0,0 +1,39 @@
+# Changelog
+## v1.1.5
+> 2020.12.26
+- 🐞**fix vue2**: '[Vue warn]: Injection "ICON_CONFIGS" not found' [#80](https://github.com/bytedance/IconPark/issues/80)
+- **feat vue2/vue3**: add `install` method [#75](https://github.com/bytedance/IconPark/issues/75)
+- 🐞**fix vue2/vue3/react**: import `DEFAULT_ICON_CONFIGS` error with `babel-plugin-import`[#25](https://github.com/bytedance/IconPark/issues/25)
+- 🆕**feat vue2/vue3/react/svg**: add 'tree-shaking' support
+
+## v1.1.4
+> 2020.12.21
+- 🐞**fix react**: IconType type problem.[#61](https://github.com/bytedance/IconPark/issues/61)
+
+## v1.1.3
+> 2020.12.20
+- 🐞**fix source**: 34 svg files
+- 🐞**fix vue**: update`inheritAttrs: true`
+
+## v1.1.2
+> 2020.12.15
+- 🦋**add icons**:add 150+ icons
+
+## v1.1.1
+> 2020.11.26
+- 🦋**add icons**:add 100+ icons
+
+
+## v1.0.14
+> 2020.11.26 
+
+## v1.0.13
+> 2020.11.05
+
+## v1.0.13
+> 2020.10.29
+- 🆕 add new category `Sport`, update icons
+
+## v1.0.10
+> 2020.09.30
+- 🆕 support vue3.0, [vue-next icons](https://github.com/bytedance/IconPark/tree/master/packages/vue-next)
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -0,0 +1,40 @@
+# 日志
+
+## v1.1.5
+> 2020.12.26
+- 🐞**修复vue2包**: '[Vue warn]: Injection "ICON_CONFIGS" not found' [#80](https://github.com/bytedance/IconPark/issues/80)
+- **更新vue2/vue3包**: 增加 `install` 方法 [#75](https://github.com/bytedance/IconPark/issues/75)
+- 🐞**修复vue2/vue3/react包**: 修复使用`babel-plugin-import`时报错`DEFAULT_ICON_CONFIGS is not defined`[#25](https://github.com/bytedance/IconPark/issues/25)
+- 🆕**更新vue2/vue3/react/svg包**: 增加'tree-shaking'支持
+
+## v1.1.4
+> 2020.12.21
+- 🐞**修复React包**: IconType类型问题.[#61](https://github.com/bytedance/IconPark/issues/61)
+
+## v1.1.3
+> 2020.12.20
+- 🐞**修复SVG源文件**: 更新34个源文件
+- 🐞**修复vue包**: 改`inheritAttrs: true`
+
+## v1.1.2
+> 2020.12.15
+- 🦋**增加图标**: 增加 150+ 图标
+
+## v1.1.1
+> 2020.11.26
+- 🦋**增加图标**: 增加 100+ 图标
+
+
+## v1.0.14
+> 2020.11.26 
+
+## v1.0.13
+> 2020.11.05
+
+## v1.0.13
+> 2020.10.29
+- 🆕**增加图标**: 增加 `Sport`分类, 更新部分icon源文件
+
+## v1.0.10
+> 2020.09.30
+-  🆕 **增加vue3.0包**: [vue-next icons](https://github.com/bytedance/IconPark/tree/master/packages/vue-next)
diff --git a/README.md b/README.md
@@ -63,17 +63,7 @@ After Transforming:
 <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-tool.png" alt="Icon Tools" width="200px"></img>   
 
 ### Changelog
-- 2020.12.21 publish v1.1.4
-    - fix `React Package` IconType type problem.[#61](https://github.com/bytedance/IconPark/issues/61)
-- 2020.12.20 publish v1.1.3
-    - fix 34 svg files
-    - vue package update`inheritAttrs: true`
-- 2020.12.15 publish v1.1.2, add 150+ icons
-- 2020.11.26 publish v1.1.1, add new icons
-- 2020.11.13 publish v1.0.14
-- 2020.11.05 publish v1.0.13
-- 2020.10.29 add new category `Sport`, update icons
-- 2020.9.30 support vue3.0, [vue-next icons](https://github.com/bytedance/IconPark/tree/master/packages/vue-next)
+[CHANGELOG.en-US](CHANGELOG.en-US.md) | [CHANGELOG.简体中文](CHANGELOG.zh-CN.md)
 
 ### Contact Us
 <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/lark.png"></img>

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -55,17 +55,7 @@ IconPark提供了超过1400个高质量图标，并且提供了一个界面来
 <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-tool.png" width="200px"></img>    
 
 ### 变更记录
-- 2020.12.21 发布1.1.4版本
-    - 修复 `React Package` IconType类型问题.[#61](https://github.com/bytedance/IconPark/issues/61)
-- 2020.12.20 发布1.1.3版本
-    - 修复34个异常图标svg源文件
-    - 修复Vue package包属性继承，改为`inheritAttrs: true`
-- 2020.12.15 新增150+图标，发布v1.1.2版本
-- 2020.11.26 npm 发布 v1.1.1, 丰富图标数量
-- 2020.11.13 npm 发布 v1.0.14
-- 2020.11.05 npm 发布 v1.0.13
-- 2020.10.29 丰富icon数量，增加 `Sport`分类, 更新部分icon源文件
-- 2020.09.30 支持vue3.0, [vue-next icons](https://github.com/bytedance/IconPark/tree/master/packages/vue-next)
+[CHANGELOG.en-US](CHANGELOG.en-US.md) | [CHANGELOG.zh-CN](CHANGELOG.zh-CN.md)
 
 ### 联系
 <img src="https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/lark.png"></img>

diff --git a/packages/react/src/icons/DEFAULT_ICON_CONFIGS.ts b/packages/react/src/icons/DEFAULT_ICON_CONFIGS.ts
@@ -0,0 +1,8 @@
+/**
+ * @file DEFAULT_ICON_CONFIGS
+ * @author zhangping(zhangping.apple@bytedance.com)
+ */
+
+import {DEFAULT_ICON_CONFIGS} from '../runtime';
+
+export default DEFAULT_ICON_CONFIGS;
diff --git a/packages/svg/src/icons/DEFAULT_ICON_CONFIGS.ts b/packages/svg/src/icons/DEFAULT_ICON_CONFIGS.ts
@@ -0,0 +1,8 @@
+/**
+ * @file DEFAULT_ICON_CONFIGS
+ * @author zhangping(zhangping.apple@bytedance.com)
+ */
+
+import {DEFAULT_ICON_CONFIGS} from '../runtime';
+
+export default DEFAULT_ICON_CONFIGS;
diff --git a/packages/vue-next/README.md b/packages/vue-next/README.md
@@ -43,7 +43,16 @@ export default {
 }
 </script>
 ```
+If you don't want to refer to it, you can install icons globally.
 
+```typescript
+import {install} from '@icon-park/vue-next/es/all';
+import Vue from 'vue';
+
+// Install
+install(Vue); // use default prefix 'icon', eg: icon is People, name is icon-people.
+install(Vue, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.
+```
 ### Style Sheet
 
 Import the icon style:

diff --git a/packages/vue-next/README.zh-CN.md b/packages/vue-next/README.zh-CN.md
@@ -4,7 +4,7 @@
 ## 介绍
 
 ### 新特性
-* 提供超过1200图标
+* 提供超过1600图标
 * 支持4种主题:
     * 线性
     * 填充
@@ -43,6 +43,16 @@ export default {
 </script>
 ```
 
+如果你不想引用，那么你可以全局安装图标
+
+```typescript
+import {install} from '@icon-park/vue-next/es/all';
+import Vue from 'vue';
+
+// Install
+install(Vue); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
+install(Vue, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.
+```
 ### Style Sheet
 
 引用预设样式

diff --git a/packages/vue-next/src/all.ts b/packages/vue-next/src/all.ts
@@ -2,7 +2,7 @@
  * @file all
  */
 
-import {createVNode, DefineComponent, ComponentOptions} from '@vue/runtime-dom';
+import {createVNode, App, DefineComponent, ComponentOptions} from '@vue/runtime-dom';
 import * as IconMap from './map';
 import {IIconProps} from './runtime';
 
@@ -52,3 +52,9 @@ const IconParkOptions: IIconAllOptions = {
 };
 
 export const IconPark: AllIcon = IconParkOptions as AllIcon;
+
+export function install(Vue: App, prefix?: string): void {
+    Object.values(IconMap).forEach(icon => {
+        Vue.component(prefix ? prefix + '-' + icon.name.slice(5) : icon.name, icon);
+    });
+}
diff --git a/packages/vue-next/src/icons/DEFAULT_ICON_CONFIGS.ts b/packages/vue-next/src/icons/DEFAULT_ICON_CONFIGS.ts
@@ -0,0 +1,8 @@
+/**
+ * @file DEFAULT_ICON_CONFIGS
+ * @author zhangping(zhangping.apple@bytedance.com)
+ */
+
+import {DEFAULT_ICON_CONFIGS} from '../runtime';
+
+export default DEFAULT_ICON_CONFIGS;
diff --git a/packages/vue-next/src/index.ts b/packages/vue-next/src/index.ts
@@ -4,5 +4,4 @@
  */
 
 export * from './map';
-
 export {IconProvider, DEFAULT_ICON_CONFIGS} from './runtime';
diff --git a/packages/vue/README.md b/packages/vue/README.md
@@ -47,13 +47,12 @@ export default {
 If you don't want to refer to it, you can install icons globally.
 
 ```typescript
-import * as icons from '@icon-park/vue';
+import {install} from '@icon-park/vue/es/all';
 import Vue from 'vue';
 
 // Install
-Object.values(icons).forEach(icon => {
-    Vue.install(icon.name, icon);
-});
+install(Vue); // use default prefix 'icon', eg: icon is People, name is icon-people.
+install(Vue, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.
 ```
 
 ### Style Sheet

diff --git a/packages/vue/README.zh-CN.md b/packages/vue/README.zh-CN.md
@@ -45,16 +45,17 @@ export default {
 
 如果你不想引用，那么你可以全局安装图标
 
+
 ```typescript
-import * as icons from '@icon-park/vue';
+import {install} from '@icon-park/vue/es/all';
 import Vue from 'vue';
 
 // Install
-Object.values(icons).forEach(icon => {
-    Vue.install(icon.name, icon);
-});
+install(Vue); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
+install(Vue, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.
 ```
 
+
 ### Style Sheet
 
 引用预设样式

diff --git a/packages/vue/src/all.ts b/packages/vue/src/all.ts
@@ -53,3 +53,9 @@ const options: ComponentOptions<IIconParkInstance> = {
 };
 
 export const IconPark: VueConstructor<IIconAllProps> = options as VueConstructor<IIconAllProps>;
+
+export function install(Vue: VueConstructor, prefix?: string): void {
+    Object.values(IconMap).forEach(icon => {
+        Vue.component(prefix ? prefix + '-' + icon.name.slice(5) : icon.name, icon);
+    });
+}
diff --git a/packages/vue/src/icons/DEFAULT_ICON_CONFIGS.ts b/packages/vue/src/icons/DEFAULT_ICON_CONFIGS.ts
@@ -0,0 +1,8 @@
+/**
+ * @file DEFAULT_ICON_CONFIGS
+ * @author zhangping(zhangping.apple@bytedance.com)
+ */
+
+import {DEFAULT_ICON_CONFIGS} from '../runtime';
+
+export default DEFAULT_ICON_CONFIGS;
diff --git a/packages/vue/src/runtime/index.tsx b/packages/vue/src/runtime/index.tsx
@@ -221,7 +221,9 @@ export function IconWrapper(name: string, rtl: boolean, render: IconRender): Ico
 
     const options: IconOptions = {
         name: 'icon-' + name,
-        inject: ['ICON_CONFIGS'],
+        inject: {
+            ICON_CONFIGS: {default: DEFAULT_ICON_CONFIGS}
+        },
         props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'fill', 'spin'],
         data() {
             return {id: guid()};