feat: icon use custom url

Tencent · Mar 15, 2022 · b10171a · b10171a
1 parent beb810c
commit b10171a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -201,7 +201,7 @@
     "raf": "~3.4.1",
     "react-popper": "~2.2.5",
     "react-transition-group": "~4.4.1",
-    "tdesign-icons-react": "~0.0.8",
+    "tdesign-icons-react": "~0.0.9",
     "tslib": "~2.3.1",
     "use-resize-observer": "^8.0.0",
     "uuid": "~8.3.2",

diff --git a/src/icon/_example/Enhanced.jsx b/src/icon/_example/Enhanced.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Icon } from 'tdesign-icons-react';
+
+const CustomUrlIcon = ({ name, size, style }) => (
+  <Icon name={name} size={size} style={style} url="https://tdesign.gtimg.com/icon/default-demo/index.js" />
+);
+
+function EnhancedIconExample() {
+  return (
+    <div>
+      <CustomUrlIcon name="cps-icon-home-sheep" style={{ marginRight: '8px' }} />
+      <CustomUrlIcon name="cps-icon-home-sheep" size="medium" style={{ marginRight: '8px' }} />
+      <CustomUrlIcon name="cps-icon-home-sheep" size="large" style={{ marginRight: '8px' }} />
+      <CustomUrlIcon name="cps-icon-home-sheep" size="25px" />
+      <br />
+      <br />
+      <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'red', marginRight: '8px' }} />
+      <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'green', marginRight: '8px' }} />
+      <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'orange', marginRight: '8px' }} />
+      <CustomUrlIcon name="t-icon-home" />
+    </div>
+  );
+}
+
+export default EnhancedIconExample;
diff --git a/src/icon/_example/IconFontEnhanced.jsx b/src/icon/_example/IconFontEnhanced.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconFont } from 'tdesign-icons-react';
+
+const CustomUrlIconFont = ({ name, size, style }) => (
+  <IconFont name={name} size={size} style={style} url="https://tdesign.gtimg.com/icon/default-demo/index.css" />
+);
+
+function EnhancedIconExample() {
+  return (
+    <div>
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ marginRight: '8px' }} />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="medium" style={{ marginRight: '8px' }} />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="large" style={{ marginRight: '8px' }} />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="25px" />
+      <br />
+      <br />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'red', marginRight: '8px' }} />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'green', marginRight: '8px' }} />
+      <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'orange', marginRight: '8px' }} />
+      <CustomUrlIconFont name="t-icon-home" />
+    </div>
+  );
+}
+
+export default EnhancedIconExample;
diff --git a/src/icon/icon.md b/src/icon/icon.md
@@ -20,6 +20,27 @@
 
 {{ IconFontExample }}
 
+### SVG 高级用法
+
+可以传入 url 加入新的 SVG 图标。
+
+引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。
+
+组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。
+
+{{ Enhanced }}
+
+
+### IconFont 高级用法
+
+可以传入 url 加入新的 iconfont 图标。
+
+引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。
+
+组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。
+
+{{ IconFontEnhanced }}
+
 ### 全部图标
 
 <td-icons-view />

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -296,8 +296,12 @@ exports[`ssr snapshot test renders ./src/grid/_example/sort.jsx correctly 1`] =
 
 exports[`ssr snapshot test renders ./src/grid/_example/valign.jsx correctly 1`] = `"<p>align top</p><div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div></div><p>Align Middle</p><div class=\\"t-row t-row--space-around t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div></div><p>Align Bottom</p><div class=\\"t-row t-row--space-between t-row--bottom\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:80px\\">col-3</div></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px\\" gutter=\\"0\\"><div style=\\"height:40px\\">col-3</div></div></div>"`;
 
+exports[`ssr snapshot test renders ./src/icon/_example/Enhanced.jsx correctly 1`] = `"<div data-reactroot=\\"\\"><svg class=\\"t-icon cps-icon-home-sheep\\" style=\\"margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon cps-icon-home-sheep t-size-m\\" style=\\"margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon cps-icon-home-sheep t-size-l\\" style=\\"margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon cps-icon-home-sheep\\" style=\\"font-size:25px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><br/><br/><svg class=\\"t-icon cps-icon-home-sheep\\" style=\\"color:red;margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon cps-icon-home-sheep\\" style=\\"color:green;margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon cps-icon-home-sheep\\" style=\\"color:orange;margin-right:8px\\"><use xlink:href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-home\\"><use xlink:href=\\"#t-icon-home\\"></use></svg></div>"`;
+
 exports[`ssr snapshot test renders ./src/icon/_example/IconExample.jsx correctly 1`] = `"<div style=\\"display:flex;flex-wrap:wrap\\" data-reactroot=\\"\\"><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-loading\\" style=\\"font-size:2em\\"><path fill=\\"currentColor\\" d=\\"M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z\\" fill-opacity=\\"0.9\\"></path></svg><div style=\\"margin-top:12px\\">LoadingIcon</div></div><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\" style=\\"font-size:2em\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg><div style=\\"margin-top:12px\\">CloseIcon</div></div><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:2em\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg><div style=\\"margin-top:12px\\">CheckCircleFilledIcon</div></div></div>"`;
 
+exports[`ssr snapshot test renders ./src/icon/_example/IconFontEnhanced.jsx correctly 1`] = `"<div data-reactroot=\\"\\"><i style=\\"margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep\\"></i><i style=\\"margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep t-size-m\\"></i><i style=\\"margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep t-size-l\\"></i><i style=\\"font-size:25px\\" class=\\"t-icon cps-icon cps-icon-home-sheep\\"></i><br/><br/><i style=\\"color:red;margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep\\"></i><i style=\\"color:green;margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep\\"></i><i style=\\"color:orange;margin-right:8px\\" class=\\"t-icon cps-icon cps-icon-home-sheep\\"></i><i class=\\"t-icon t-icon-home\\"></i></div>"`;
+
 exports[`ssr snapshot test renders ./src/icon/_example/IconFontExample.jsx correctly 1`] = `"<div style=\\"display:flex;flex-wrap:wrap\\" data-reactroot=\\"\\"><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><i style=\\"font-size:2em\\" class=\\"t-icon t-icon-loading\\"></i><div style=\\"margin-top:12px\\">loading</div></div><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><i style=\\"font-size:2em\\" class=\\"t-icon t-icon-close\\"></i><div style=\\"margin-top:12px\\">close</div></div><div style=\\"width:140px;height:140px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column\\"><i style=\\"font-size:2em\\" class=\\"t-icon t-icon-check-circle-filled\\"></i><div style=\\"margin-top:12px\\">check-circle-filled</div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/input/_example/addon.jsx correctly 1`] = `"<div class=\\"tdesign-demo-item--input__input-box\\" data-reactroot=\\"\\"><div class=\\"t-addon t-addon--prepend\\"><span class=\\"t-addon__prepend\\">http://</span><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><input placeholder=\\"请输入域名\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-addon t-addon--prepend t-addon--append\\"><span class=\\"t-addon__prepend\\">http://</span><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><input placeholder=\\"请输入域名\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-addon__append\\">.com</span></div></div>"`;