diff --git a/docs/icon/index.en-us.md b/docs/icon/index.en-us.md
index 57a431e230..6f0ad6d512 100644
--- a/docs/icon/index.en-us.md
+++ b/docs/icon/index.en-us.md
@@ -15,3 +15,24 @@
| ---- | ---------------------------------------------------- | -------- | ------------ |
| size | To set the icon size
**option**:
'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit' | Enum | 'medium' |
| type | Specify which icon to display | String | - |
+
+### Icon.createFromIconfontCN
+
+If you want to use svg icon, use `Icon.createFromIconfontCN`. There is cache processing by default, or you can manually cache by setting `id` (note that if there is DOM element with the same `id` on the page, icon will not load the current remote icon resource)
+
+```js
+import { Icon } from '@alifd/next';
+
+const CustomIcon = Icon.createFromIconfontCN({
+ scriptUrl: '//at.alicdn.com/t/font_1464085_egnk4s8yv2f.js',
+});
+
+// CustomIcon have the same props as Icon, e.g. size
+ReactDOM.render(
+
+
+
+
+
+, mountNode);
+```
diff --git a/docs/icon/index.md b/docs/icon/index.md
index eed3479617..64c229753b 100644
--- a/docs/icon/index.md
+++ b/docs/icon/index.md
@@ -25,3 +25,24 @@
| ---- | --------------------------------------------------------------------------------- | ----------- | -------- |
| size | 指定图标大小
**可选值**
xxs, xs, small, medium, large, xl, xxl, xxxl, inherit | Enum/Number | 'medium' |
| type | 指定显示哪种图标 | String | - |
+
+### Icon.createFromIconfontCN
+
+通过自定义 iconfont源来使用使用svg格式的图片,默认有缓存处理,也可以通过设置 id 手动进行缓存(注意若页面上已经有同名 id 的 dom 元素,Icon将不再加载当前远程icon资源)
+
+```js
+import { Icon } from '@alifd/next';
+
+const CustomIcon = Icon.createFromIconfontCN({
+ scriptUrl: '//at.alicdn.com/t/font_1464085_egnk4s8yv2f.js',
+});
+
+// 同 Icon 基础元素一样,有相同的 size 设定
+ReactDOM.render(
+
+
+
+
+
+, mountNode);
+```
diff --git a/src/icon/icon-font.jsx b/src/icon/icon-font.jsx
index 35457635d5..362140b8bc 100644
--- a/src/icon/icon-font.jsx
+++ b/src/icon/icon-font.jsx
@@ -5,8 +5,17 @@ import Icon from './index';
const customCache = new Set();
+/** Icon.createFromIconfontCN
+ * @description 通过自定义 iconfont源来使用使用svg格式的图片,默认有缓存处理,也可以通过设置 id 手动进行缓存(注意若页面上已经有同名 id 的 dom 元素,Icon将不再加载当前远程icon资源)
+ * @order 1
+ */
export default function createFromIconfontCN(options = {}) {
- const { scriptUrl, extraCommonProps = {} } = options;
+ const { scriptUrl, extraCommonProps = {}, id } = options;
+ let hasExist = customCache.has(scriptUrl);
+
+ if ('id' in options && document.getElementById(id)) {
+ hasExist = true;
+ }
/**
* DOM API required.
@@ -20,11 +29,15 @@ export default function createFromIconfontCN(options = {}) {
typeof document.createElement === 'function' &&
typeof scriptUrl === 'string' &&
scriptUrl.length &&
- !customCache.has(scriptUrl)
+ !hasExist
) {
const script = document.createElement('script');
script.setAttribute('src', scriptUrl);
script.setAttribute('data-namespace', scriptUrl);
+ if ('id' in options) {
+ script.setAttribute('id', id);
+ }
+
customCache.add(scriptUrl);
document.body.appendChild(script);
}
diff --git a/src/icon/main.scss b/src/icon/main.scss
index f7973e6878..aa858a4e63 100644
--- a/src/icon/main.scss
+++ b/src/icon/main.scss
@@ -143,7 +143,7 @@
.#{$css-prefix}icon-remote {
width: 1em;
height: 1em;
- vertical-align: -.15em;
+ vertical-align: middle;
fill: currentColor;
}
}
diff --git a/types/date-picker/index.d.ts b/types/date-picker/index.d.ts
index 21328798b5..09aa65fa7f 100644
--- a/types/date-picker/index.d.ts
+++ b/types/date-picker/index.d.ts
@@ -9,6 +9,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes {
}
export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
+ name?: string;
/**
* 输入框内置标签
*/
@@ -145,6 +146,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes {
}
export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
+ name?: string;
type?: 'date' | 'month' | 'year',
/**
@@ -311,6 +313,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes {
}
export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
+ name?: string;
/**
* 输入框内置标签
*/
@@ -434,6 +437,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes {
}
export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
+ name?: string;
/**
* 输入框内置标签
*/
diff --git a/types/icon/index.d.ts b/types/icon/index.d.ts
index 67d9cede22..68ee47d68d 100644
--- a/types/icon/index.d.ts
+++ b/types/icon/index.d.ts
@@ -25,4 +25,16 @@ export interface IconProps extends React.HTMLAttributes, CommonProp
| 'inherit';
}
-export default class Icon extends React.Component {}
+export interface iconOptions {
+ /**
+ * 如果页面上已经有同 id 的标签,那么不会再加载这个图标库
+ */
+ id?: string;
+ scriptUrl: string;
+}
+
+export class CustomIcon extends React.Component {}
+
+export default class Icon extends React.Component {
+ static createFromIconfontCN(options: iconOptions): typeof CustomIcon;
+}