fix(Icon): add id for custom icon

AricZhu · May 9, 2020 · e852745 · e852745
1 parent 3af6d61
commit e852745
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 4 deletions.
diff --git a/docs/icon/index.en-us.md b/docs/icon/index.en-us.md
@@ -15,3 +15,24 @@
 | ---- | ---------------------------------------------------- | -------- | ------------ |
 | size | To set the icon size<br><br>**option**:<br>'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(
+    <div>
+        <CustomIcon type="icon-store" size="small"/>
+        <CustomIcon type="icon-gift"/>
+        <CustomIcon type="icon-pic" size="large"/>
+    </div>
+, mountNode);
+```
diff --git a/docs/icon/index.md b/docs/icon/index.md
@@ -25,3 +25,24 @@
 | ---- | --------------------------------------------------------------------------------- | ----------- | -------- |
 | size | 指定图标大小<br><br/>**可选值**<br/> 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(
+    <div>
+        <CustomIcon type="icon-store" size="small"/>
+        <CustomIcon type="icon-gift"/>
+        <CustomIcon type="icon-pic" size="large"/>
+    </div>
+, mountNode);
+```
diff --git 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
@@ -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
@@ -9,6 +9,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
 }
 
 export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
+    name?: string;
     /**
      * 输入框内置标签
      */
@@ -145,6 +146,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
 }
 
 export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
+    name?: string;
     type?: 'date' | 'month' | 'year',
 
     /**
@@ -311,6 +313,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
 }
 
 export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
+    name?: string;
     /**
      * 输入框内置标签
      */
@@ -434,6 +437,7 @@ interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
 }
 
 export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
+    name?: string;
     /**
      * 输入框内置标签
      */

diff --git a/types/icon/index.d.ts b/types/icon/index.d.ts
@@ -25,4 +25,16 @@ export interface IconProps extends React.HTMLAttributes<HTMLElement>, CommonProp
         | 'inherit';
 }
 
-export default class Icon extends React.Component<IconProps, any> {}
+export interface iconOptions {
+    /**
+     * 如果页面上已经有同 id 的标签，那么不会再加载这个图标库
+     */
+    id?: string;
+    scriptUrl: string;
+}
+
+export class CustomIcon extends React.Component<IconProps, any> {}
+
+export default class Icon extends React.Component<IconProps, any> {
+    static createFromIconfontCN(options: iconOptions): typeof CustomIcon;
+}