Icon组件

全部Icon

xiao-icon-loading1 点击复制

xiao-icon-loading2 点击复制

xiao-icon-loading3 点击复制

xiao-icon-91jiazai 点击复制

xiao-icon-Loading 点击复制

xiao-icon-loading4 点击复制

xiao-icon-loading5 点击复制

xiao-icon-3column 点击复制

xiao-icon-column-4 点击复制

xiao-icon-add 点击复制

xiao-icon-add-circle 点击复制

xiao-icon-adjust 点击复制

xiao-icon-arrow-up-circle 点击复制

xiao-icon-arrow-right-circle 点击复制

xiao-icon-arrow-down 点击复制

xiao-icon-ashbin 点击复制

xiao-icon-arrow-right 点击复制

xiao-icon-browse 点击复制

xiao-icon-bottom 点击复制

xiao-icon-back 点击复制

xiao-icon-bad 点击复制

xiao-icon-arrow-double-left 点击复制

xiao-icon-arrow-left-circle 点击复制

xiao-icon-arrow-double-right 点击复制

xiao-icon-caps-lock 点击复制

xiao-icon-camera 点击复制

xiao-icon-chart-bar 点击复制

xiao-icon-attachment 点击复制

xiao-icon-code 点击复制

xiao-icon-close 点击复制

xiao-icon-check-item 点击复制

xiao-icon-calendar 点击复制

xiao-icon-comment 点击复制

xiao-icon-column-vertical 点击复制

xiao-icon-column-horizontal 点击复制

xiao-icon-complete 点击复制

xiao-icon-chart-pie 点击复制

xiao-icon-cry 点击复制

xiao-icon-customer-service 点击复制

xiao-icon-delete 点击复制

xiao-icon-direction-down 点击复制

xiao-icon-copy 点击复制

xiao-icon-cut 点击复制

xiao-icon-data-view 点击复制

xiao-icon-direction-down-circle 点击复制

xiao-icon-direction-right 点击复制

xiao-icon-direction-up 点击复制

xiao-icon-discount 点击复制

xiao-icon-direction-left 点击复制

xiao-icon-download 点击复制

xiao-icon-electronics 点击复制

xiao-icon-drag 点击复制

xiao-icon-elipsis 点击复制

xiao-icon-export 点击复制

xiao-icon-explain 点击复制

xiao-icon-edit 点击复制

xiao-icon-eye-close 点击复制

xiao-icon-email 点击复制

xiao-icon-error 点击复制

xiao-icon-favorite 点击复制

xiao-icon-file-common 点击复制

xiao-icon-file-delete 点击复制

xiao-icon-file-add 点击复制

xiao-icon-film 点击复制

xiao-icon-fabulous 点击复制

xiao-icon-file 点击复制

xiao-icon-folder-close 点击复制

xiao-icon-filter 点击复制

xiao-icon-good 点击复制

xiao-icon-hide 点击复制

xiao-icon-home 点击复制

xiao-icon-history 点击复制

xiao-icon-file-open 点击复制

xiao-icon-forward 点击复制

xiao-icon-import 点击复制

xiao-icon-image-text 点击复制

xiao-icon-keyboard-26 点击复制

xiao-icon-keyboard-9 点击复制

xiao-icon-link 点击复制

xiao-icon-layout 点击复制

xiao-icon-fullscreen-shrink 点击复制

xiao-icon-layers 点击复制

xiao-icon-lock 点击复制

xiao-icon-fullscreen-expand 点击复制

xiao-icon-map 点击复制

xiao-icon-meh 点击复制

xiao-icon-menu 点击复制

xiao-icon-loading 点击复制

xiao-icon-help 点击复制

xiao-icon-minus-circle 点击复制

xiao-icon-modular 点击复制

xiao-icon-notification 点击复制

xiao-icon-mic 点击复制

xiao-icon-more 点击复制

xiao-icon-pad 点击复制

xiao-icon-operation 点击复制

xiao-icon-play 点击复制

xiao-icon-print 点击复制

xiao-icon-mobile-phone 点击复制

xiao-icon-minus 点击复制

xiao-icon-navigation 点击复制

xiao-icon-pdf 点击复制

xiao-icon-prompt 点击复制

xiao-icon-move 点击复制

xiao-icon-refresh 点击复制

xiao-icon-run-up 点击复制

xiao-icon-picture 点击复制

xiao-icon-run-in 点击复制

xiao-icon-pin 点击复制

xiao-icon-save 点击复制

xiao-icon-search 点击复制

xiao-icon-share 点击复制

xiao-icon-scanning 点击复制

xiao-icon-security 点击复制

xiao-icon-sign-out 点击复制

xiao-icon-select 点击复制

xiao-icon-stop 点击复制

xiao-icon-success 点击复制

xiao-icon-smile 点击复制

xiao-icon-switch 点击复制

xiao-icon-setting 点击复制

xiao-icon-survey 点击复制

xiao-icon-task 点击复制

xiao-icon-skip 点击复制

xiao-icon-text 点击复制

xiao-icon-time 点击复制

xiao-icon-telephone-out 点击复制

xiao-icon-toggle-left 点击复制

xiao-icon-toggle-right 点击复制

xiao-icon-telephone 点击复制

xiao-icon-top 点击复制

xiao-icon-unlock 点击复制

xiao-icon-user 点击复制

xiao-icon-upload 点击复制

xiao-icon-work 点击复制

xiao-icon-training 点击复制

xiao-icon-warning 点击复制

xiao-icon-zoom-in 点击复制

xiao-icon-zoom-out 点击复制

xiao-icon-add-bold 点击复制

xiao-icon-arrow-left-bold 点击复制

xiao-icon-arrow-up-bold 点击复制

xiao-icon-close-bold 点击复制

xiao-icon-arrow-down-bold 点击复制

xiao-icon-minus-bold 点击复制

xiao-icon-arrow-right-bold 点击复制

xiao-icon-select-bold 点击复制

xiao-icon-arrow-up-filling 点击复制

xiao-icon-arrow-down-filling 点击复制

xiao-icon-arrow-left-filling 点击复制

xiao-icon-arrow-right-filling 点击复制

xiao-icon-caps-unlock-filling 点击复制

xiao-icon-comment-filling 点击复制

xiao-icon-check-item-filling 点击复制

xiao-icon-clock-filling 点击复制

xiao-icon-delete-filling 点击复制

xiao-icon-decline-filling 点击复制

xiao-icon-dynamic-filling 点击复制

xiao-icon-intermediate-filling 点击复制

xiao-icon-favorite-filling 点击复制

xiao-icon-layout-filling 点击复制

xiao-icon-help-filling 点击复制

xiao-icon-history-filling 点击复制

xiao-icon-filter-filling 点击复制

xiao-icon-file-common-filling 点击复制

xiao-icon-news-filling 点击复制

xiao-icon-edit-filling 点击复制

xiao-icon-fullscreen-expand-filling 点击复制

xiao-icon-smile-filling 点击复制

xiao-icon-rise-filling 点击复制

xiao-icon-picture-filling 点击复制

xiao-icon-notification-filling 点击复制

xiao-icon-user-filling 点击复制

xiao-icon-setting-filling 点击复制

xiao-icon-switch-filling 点击复制

xiao-icon-work-filling 点击复制

xiao-icon-task-filling 点击复制

xiao-icon-success-filling 点击复制

xiao-icon-warning-filling 点击复制

xiao-icon-folder-filling 点击复制

xiao-icon-map-filling 点击复制

xiao-icon-prompt-filling 点击复制

xiao-icon-meh-filling 点击复制

xiao-icon-cry-filling 点击复制

xiao-icon-top-filling 点击复制

xiao-icon-home-filling 点击复制

xiao-icon-sorting 点击复制

示例2

直接通过class的方式使用

通过组件的方式使用

加载Icom说明

以class方式使用是静态的，以组件方式使用是动态的

<div class="icon-demo">
  <div class="icon-demo__class">
    <p>直接通过class的方式使用</p>
    <i class="xiao-icon-arrow-down-filling"></i>
    <i class="xiao-icon-close-bold"></i>
    <i class="xiao-icon-arrow-left-bold"></i>
    <i class="xiao-icon-warning"></i>
  </div>

  <div class="icon-demo__component">
    <p>通过组件的方式使用</p>
    <xiao-icon size="24" name="xiao-icon-map-filling" color="red" />
    <xiao-icon :size="34" name="xiao-icon-meh-filling" color="#409eff" />
    <xiao-icon name="xiao-icon-smile" color="rgba(0, 0, 0, 1)" />
    <xiao-icon
      size="24"
      name="xiao-icon-arrow-down-filling"
      color="#0ED57D"
    />
  </div>

  <div class="icon-demo__desc">
    <p>加载Icom说明</p>
    <i class="xiao-icon-loading1" />
    <xiao-icon size="28" name="xiao-icon-loading1" />
    <p>以class方式使用是静态的，以组件方式使用是动态的</p>
  </div>
</div>

Props

参数	说明	类型	默认值
name	icon的名称	string	-
color	icon的颜色	string	-
size	icon的大小，单位px	string/number	16