feat(icon): support archer-svgs

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.8.16](https://github.com/Yoshino-UI/Yoshino/compare/v0.8.15...v0.8.16) (2019-01-23)
+
+
+### Bug Fixes
+
+* **input:** value -> string ([ef60641](https://github.com/Yoshino-UI/Yoshino/commit/ef60641))
+
+
+
 ## [0.8.15](https://github.com/Yoshino-UI/Yoshino/compare/v0.8.14...v0.8.15) (2019-01-23)
 
 

components/Icon/Icon.tsx

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import {IBaseComponent} from '../template/component';
-import Archer from 'archer-svgs';
+import Archer from './archerConfig';
 
 export interface IIconProps extends IBaseComponent {
   /**
@@ -20,11 +20,11 @@ export interface IIconState {
   svgHtml: string;
 }
 
-const svgTarget = 'https://unpkg.com/[email protected]/dist/ionicons/svg/';
 /**
  * **图标**-展示对应的矢量化图标。
  */
 export class Icon extends Component<IIconProps, IIconState> {
+  static Archer: typeof Archer;
   state = {
     svgHtml: ''
   };
@@ -36,7 +36,7 @@ export class Icon extends Component<IIconProps, IIconState> {
     }
 
     // tslint:disable-next-line no-any
-    const svg = await Archer.fetchSvg(`${svgTarget}${this.props.type}.svg`);
+    const svg = await Archer.downloadSvg(`${this.props.type}`);
     this.setState({
       svgHtml: svg,
     });
@@ -49,7 +49,7 @@ export class Icon extends Component<IIconProps, IIconState> {
 
     if (this.props.type !== props.type) {
       // tslint:disable-next-line no-any
-      const svg = await Archer.fetchSvg(`${svgTarget}${props.type}.svg`);
+      const svg = await Archer.downloadSvg(`${props.type}`);
       this.setState({
         svgHtml: svg,
       });
@@ -74,4 +74,6 @@ export class Icon extends Component<IIconProps, IIconState> {
   }
 }
 
+Icon.Archer = Archer;
+
 export default Icon;

components/Icon/archerConfig.ts

@@ -0,0 +1,21 @@
+import Archer, { ISVG } from 'archer-svgs';
+
+const icons = 'ios-add-circle-outline,md-add-circle-outline,ios-add-circle,md-add-circle,ios-add,md-add,ios-airplane,md-airplane,ios-alarm,md-alarm,ios-albums,md-albums,ios-alert,md-alert,ios-american-football,md-american-football,ios-analytics,md-analytics,ios-aperture,md-aperture,ios-apps,md-apps,ios-appstore,md-appstore,ios-archive,md-archive,ios-arrow-back,md-arrow-back,ios-arrow-down,md-arrow-down,ios-arrow-dropdown-circle,md-arrow-dropdown-circle,ios-arrow-dropdown,md-arrow-dropdown,ios-arrow-dropleft-circle,md-arrow-dropleft-circle,ios-arrow-dropleft,md-arrow-dropleft,ios-arrow-dropright-circle,md-arrow-dropright-circle,ios-arrow-dropright,md-arrow-dropright,ios-arrow-dropup-circle,md-arrow-dropup-circle,ios-arrow-dropup,md-arrow-dropup,ios-arrow-forward,md-arrow-forward,ios-arrow-round-back,md-arrow-round-back,ios-arrow-round-down,md-arrow-round-down,ios-arrow-round-forward,md-arrow-round-forward,ios-arrow-round-up,md-arrow-round-up,ios-arrow-up,md-arrow-up,ios-at,md-at,ios-attach,md-attach,ios-backspace,md-backspace,ios-barcode,md-barcode,ios-baseball,md-baseball,ios-basket,md-basket,ios-basketball,md-basketball,ios-battery-charging,md-battery-charging,ios-battery-dead,md-battery-dead,ios-battery-full,md-battery-full,ios-beaker,md-beaker,ios-bed,md-bed,ios-beer,md-beer,ios-bicycle,md-bicycle,ios-bluetooth,md-bluetooth,ios-boat,md-boat,ios-body,md-body,ios-bonfire,md-bonfire,ios-book,md-book,ios-bookmark,md-bookmark,ios-bookmarks,md-bookmarks,ios-bowtie,md-bowtie,ios-briefcase,md-briefcase,ios-browsers,md-browsers,ios-brush,md-brush,ios-bug,md-bug,ios-build,md-build,ios-bulb,md-bulb,ios-bus,md-bus,ios-business,md-business,ios-cafe,md-cafe,ios-calculator,md-calculator,ios-calendar,md-calendar,ios-call,md-call,ios-camera,md-camera,ios-car,md-car,ios-card,md-card,ios-cart,md-cart,ios-cash,md-cash,ios-cellular,md-cellular,ios-chatboxes,md-chatboxes,ios-chatbubbles,md-chatbubbles,ios-checkbox-outline,md-checkbox-outline,ios-checkbox,md-checkbox,ios-checkmark-circle-outline,md-checkmark-circle-outline,ios-checkmark-circle,md-checkmark-circle,ios-checkmark,md-checkmark,ios-clipboard,md-clipboard,ios-clock,md-clock,ios-close-circle-outline,md-close-circle-outline,ios-close-circle,md-close-circle,ios-close,md-close,ios-cloud-circle,md-cloud-circle,ios-cloud-done,md-cloud-done,ios-cloud-download,md-cloud-download,ios-cloud-outline,md-cloud-outline,ios-cloud-upload,md-cloud-upload,ios-cloud,md-cloud,ios-cloudy-night,md-cloudy-night,ios-cloudy,md-cloudy,ios-code-download,md-code-download,ios-code-working,md-code-working,ios-code,md-code,ios-cog,md-cog,ios-color-fill,md-color-fill,ios-color-filter,md-color-filter,ios-color-palette,md-color-palette,ios-color-wand,md-color-wand,ios-compass,md-compass,ios-construct,md-construct,ios-contact,md-contact,ios-contacts,md-contacts,ios-contract,md-contract,ios-contrast,md-contrast,ios-copy,md-copy,ios-create,md-create,ios-crop,md-crop,ios-cube,md-cube,ios-cut,md-cut,ios-desktop,md-desktop,ios-disc,md-disc,ios-document,md-document,ios-done-all,md-done-all,ios-download,md-download,ios-easel,md-easel,ios-egg,md-egg,ios-exit,md-exit,ios-expand,md-expand,ios-eye-off,md-eye-off,ios-eye,md-eye,ios-fastforward,md-fastforward,ios-female,md-female,ios-filing,md-filing,ios-film,md-film,ios-finger-print,md-finger-print,ios-fitness,md-fitness,ios-flag,md-flag,ios-flame,md-flame,ios-flash-off,md-flash-off,ios-flash,md-flash,ios-flashlight,md-flashlight,ios-flask,md-flask,ios-flower,md-flower,ios-folder-open,md-folder-open,ios-folder,md-folder,ios-football,md-football,ios-funnel,md-funnel,ios-gift,md-gift,ios-git-branch,md-git-branch,ios-git-commit,md-git-commit,ios-git-compare,md-git-compare,ios-git-merge,md-git-merge,ios-git-network,md-git-network,ios-git-pull-request,md-git-pull-request,ios-glasses,md-glasses,ios-globe,md-globe,ios-grid,md-grid,ios-hammer,md-hammer,ios-hand,md-hand,ios-happy,md-happy,ios-headset,md-headset,ios-heart,md-heart,ios-heart-dislike,md-heart-dislike,ios-heart-empty,md-heart-empty,ios-heart-half,md-heart-half,ios-help-buoy,md-help-buoy,ios-help-circle-outline,md-help-circle-outline,ios-help-circle,md-help-circle,ios-help,md-help,ios-home,md-home,ios-hourglass,md-hourglass,ios-ice-cream,md-ice-cream,ios-image,md-image,ios-images,md-images,ios-infinite,md-infinite,ios-information-circle-outline,md-information-circle-outline,ios-information-circle,md-information-circle,ios-information,md-information,ios-jet,md-jet,ios-journal,md-journal,ios-key,md-key,ios-keypad,md-keypad,ios-laptop,md-laptop,ios-leaf,md-leaf,ios-link,md-link,ios-list-box,md-list-box,ios-list,md-list,ios-locate,md-locate,ios-lock,md-lock,ios-log-in,md-log-in,ios-log-out,md-log-out,ios-magnet,md-magnet,ios-mail-open,md-mail-open,ios-mail-unread,md-mail-unread,ios-mail,md-mail,ios-male,md-male,ios-man,md-man,ios-map,md-map,ios-medal,md-medal,ios-medical,md-medical,ios-medkit,md-medkit,ios-megaphone,md-megaphone,ios-menu,md-menu,ios-mic-off,md-mic-off,ios-mic,md-mic,ios-microphone,md-microphone,ios-moon,md-moon,ios-more,md-more,ios-move,md-move,ios-musical-note,md-musical-note,ios-musical-notes,md-musical-notes,ios-navigate,md-navigate,ios-notifications-off,md-notifications-off,ios-notifications-outline,md-notifications-outline,ios-notifications,md-notifications,ios-nuclear,md-nuclear,ios-nutrition,md-nutrition,ios-open,md-open,ios-options,md-options,ios-outlet,md-outlet,ios-paper-plane,md-paper-plane,ios-paper,md-paper,ios-partly-sunny,md-partly-sunny,ios-pause,md-pause,ios-paw,md-paw,ios-people,md-people,ios-person-add,md-person-add,ios-person,md-person,ios-phone-landscape,md-phone-landscape,ios-phone-portrait,md-phone-portrait,ios-photos,md-photos,ios-pie,md-pie,ios-pin,md-pin,ios-pint,md-pint,ios-pizza,md-pizza,ios-planet,md-planet,ios-play-circle,md-play-circle,ios-play,md-play,ios-podium,md-podium,ios-power,md-power,ios-pricetag,md-pricetag,ios-pricetags,md-pricetags,ios-print,md-print,ios-pulse,md-pulse,ios-qr-scanner,md-qr-scanner,ios-quote,md-quote,ios-radio-button-off,md-radio-button-off,ios-radio-button-on,md-radio-button-on,ios-radio,md-radio,ios-rainy,md-rainy,ios-recording,md-recording,ios-redo,md-redo,ios-refresh-circle,md-refresh-circle,ios-refresh,md-refresh,ios-remove-circle-outline,md-remove-circle-outline,ios-remove-circle,md-remove-circle,ios-remove,md-remove,ios-reorder,md-reorder,ios-repeat,md-repeat,ios-resize,md-resize,ios-restaurant,md-restaurant,ios-return-left,md-return-left,ios-return-right,md-return-right,ios-reverse-camera,md-reverse-camera,ios-rewind,md-rewind,ios-ribbon,md-ribbon,ios-rocket,md-rocket,ios-rose,md-rose,ios-sad,md-sad,ios-save,md-save,ios-school,md-school,ios-search,md-search,ios-send,md-send,ios-settings,md-settings,ios-share-alt,md-share-alt,ios-share,md-share,ios-shirt,md-shirt,ios-shuffle,md-shuffle,ios-skip-backward,md-skip-backward,ios-skip-forward,md-skip-forward,ios-snow,md-snow,ios-speedometer,md-speedometer,ios-square-outline,md-square-outline,ios-square,md-square,ios-star-half,md-star-half,ios-star-outline,md-star-outline,ios-star,md-star,ios-stats,md-stats,ios-stopwatch,md-stopwatch,ios-subway,md-subway,ios-sunny,md-sunny,ios-swap,md-swap,ios-switch,md-switch,ios-sync,md-sync,ios-tablet-landscape,md-tablet-landscape,ios-tablet-portrait,md-tablet-portrait,ios-tennisball,md-tennisball,ios-text,md-text,ios-thermometer,md-thermometer,ios-thumbs-down,md-thumbs-down,ios-thumbs-up,md-thumbs-up,ios-thunderstorm,md-thunderstorm,ios-time,md-time,ios-timer,md-timer,ios-today,md-today,ios-train,md-train,ios-transgender,md-transgender,ios-trash,md-trash,ios-trending-down,md-trending-down,ios-trending-up,md-trending-up,ios-trophy,md-trophy,ios-tv,md-tv,ios-umbrella,md-umbrella,ios-undo,md-undo,ios-unlock,md-unlock,ios-videocam,md-videocam,ios-volume-high,md-volume-high,ios-volume-low,md-volume-low,ios-volume-mute,md-volume-mute,ios-volume-off,md-volume-off,ios-wallet,md-wallet,ios-walk,md-walk,ios-warning,md-warning,ios-watch,md-watch,ios-water,md-water,ios-wifi,md-wifi,ios-wine,md-wine,ios-woman,md-woman,logo-android,logo-angular,logo-apple,logo-bitbucket,logo-bitcoin,logo-buffer,logo-chrome,logo-closed-captioning,logo-codepen,logo-css3,logo-designernews,logo-dribbble,logo-dropbox,logo-euro,logo-facebook,logo-flickr,logo-foursquare,logo-freebsd-devil,logo-game-controller-a,logo-game-controller-b,logo-github,logo-google,logo-googleplus,logo-hackernews,logo-html5,logo-instagram,logo-ionic,logo-ionitron,logo-javascript,logo-linkedin,logo-markdown,logo-model-s,logo-no-smoking,logo-nodejs,logo-npm,logo-octocat,logo-pinterest,logo-playstation,logo-polymer,logo-python,logo-reddit,logo-rss,logo-sass,logo-skype,logo-slack,logo-snapchat,logo-steam,logo-tumblr,logo-tux,logo-twitch,logo-twitter,logo-usd,logo-vimeo,logo-vk,logo-whatsapp,logo-windows,logo-wordpress,logo-xbox,logo-xing,logo-yahoo,logo-yen,logo-youtube'.split(',');
+
+const svgs: ISVG = {};
+
+for (const icon of icons) {
+  svgs[icon] = {
+    version: 1,
+    url: `https://unpkg.com/[email protected]/dist/ionicons/svg/${icon}.svg`
+  };
+}
+
+Archer.setMax(100);
+Archer.setMaxSize(2048);
+
+Archer.init({
+  svgs,
+});
+
+export default Archer;

docs/pages/components/Icon/index.md

@@ -4,5 +4,9 @@
 Icon组件的图标库采用了`Ionicons 4.4.2`，对图标的导入采用按需加载，你无须担心仅使用了一个字体就引入了所有图标文件。
 
 如果不相信你可以按`F12`打开控制台，然后再该页面刷新，查看`network`的图标加载情况。
+
+为了减少项目中的svg的http请求，使用了`Archer`异步缓存本地svg。
+
+`Archer`全局唯一示例，修改配置请使用Icon.Archer.xxx调用对应方法，[Archerw文档地址](https://github.com/ShanaMaid/archer-svgs)
 
 ## 代码演示