## WC-ICON 图标
精心绘制了`84`个常用小图标。


<style>
.flex-free { display:flex;align-items:center;flex-wrap:wrap }
.flex-free > *{margin:0 16px}
.flex-free > div {display:flex;flex-direction:column;align-items:center;width:96px;height:72px;--size:28px;margin:16px;padding:12px 4px;border:1px solid var(--color-plain-1);border-radius:3px}
.flex-free > div:hover {box-shadow:0 0 10px rgba(0,0,0,.1)} 
.flex-free > div h3 {margin:auto;line-height:1.5;font-size:12px;font-weight:normal} 
</style>

### 使用

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/icon/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-icon name="home"></wc-icon>
  </wc-lang>
</wc-sandbox>


### 尺寸
`size="xxxl"`, `size="xxl"`, `size="xl"`, `size="l"`, `size="m"`, `size="s"`, 连同默认尺寸在内, 5种预设规格。
如果需要其他的尺寸的图片, 可自行通过css设置`--size: #{你想要的大小}`即可, 也可以直接设置`width, height`。 

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/icon/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-icon size="xxxl" name="android"></wc-icon>
  <wc-icon size="xxl" name="android"></wc-icon>
  <wc-icon size="xl" name="android"></wc-icon>
  <wc-icon size="l" name="android"></wc-icon>
  <wc-icon size="m" name="android"></wc-icon>
  <wc-icon size="s" name="android"></wc-icon>
</wc-space>
  </wc-lang>
</wc-sandbox>




### 全部图标列表

<section class="flex-free">
  <div><wc-icon name="android"></wc-icon><h3>android</h3></div>
  <div><wc-icon name="app"></wc-icon><h3>app</h3></div>
  <div><wc-icon name="apple"></wc-icon><h3>apple</h3></div>
  <div><wc-icon name="at"></wc-icon><h3>at</h3></div>
  <div><wc-icon name="attach"></wc-icon><h3>attach</h3></div>
  <div><wc-icon name="backward"></wc-icon><h3>backward</h3></div>
  <div><wc-icon name="bell"></wc-icon><h3>bell</h3></div>
  <div><wc-icon name="calendar"></wc-icon><h3>calendar</h3></div>
  <div><wc-icon name="camera"></wc-icon><h3>camera</h3></div>
  <div><wc-icon name="chart"></wc-icon><h3>chart</h3></div>
  <div><wc-icon name="checkbox-on"></wc-icon><h3>checkbox-on</h3></div>
  <div><wc-icon name="checkbox-off"></wc-icon><h3>checkbox-off</h3></div>
  <div><wc-icon name="client"></wc-icon><h3>client</h3></div>
  <div><wc-icon name="close"></wc-icon><h3>close</h3></div>
  <div><wc-icon name="color"></wc-icon><h3>color</h3></div>
  <div><wc-icon name="dbl-left"></wc-icon><h3>dbl-left</h3></div>
  <div><wc-icon name="dbl-right"></wc-icon><h3>dbl-right</h3></div>
  <div><wc-icon name="deny"></wc-icon><h3>deny</h3></div>
  <div><wc-icon name="doc"></wc-icon><h3>doc</h3></div>
  <div><wc-icon name="download"></wc-icon><h3>download</h3></div>
  <div><wc-icon name="edit"></wc-icon><h3>edit</h3></div>
  <div><wc-icon name="eye"></wc-icon><h3>eye</h3></div>
  <div><wc-icon name="eye-off"></wc-icon><h3>eye-off</h3></div>
  <div><wc-icon name="face"></wc-icon><h3>face</h3></div>
  <div><wc-icon name="finger-print"></wc-icon><h3>finger-print</h3></div>
  <div><wc-icon name="fire"></wc-icon><h3>fire</h3></div>
  <div><wc-icon name="first"></wc-icon><h3>first</h3></div>
  <div><wc-icon name="floppy"></wc-icon><h3>floppy</h3></div>
  <div><wc-icon name="fly"></wc-icon><h3>fly</h3></div>
  <div><wc-icon name="folder-open"></wc-icon><h3>folder-open</h3></div>
  <div><wc-icon name="folder-close"></wc-icon><h3>folder-close</h3></div>
  <div><wc-icon name="get"></wc-icon><h3>get</h3></div>
  <div><wc-icon name="happy"></wc-icon><h3>happy</h3></div>
  <div><wc-icon name="headset"></wc-icon><h3>headset</h3></div>
  <div><wc-icon name="home"></wc-icon><h3>home</h3></div>
  <div><wc-icon name="image"></wc-icon><h3>image</h3></div>
  <div><wc-icon name="info"></wc-icon><h3>info</h3></div>
  <div><wc-icon name="key"></wc-icon><h3>key</h3></div>
  <div><wc-icon name="layout"></wc-icon><h3>layout</h3></div>
  <div><wc-icon name="left"></wc-icon><h3>left</h3></div>
  <div><wc-icon name="linux"></wc-icon><h3>linux</h3></div>
  <div><wc-icon name="live"></wc-icon><h3>live</h3></div>
  <div><wc-icon name="load"></wc-icon><h3>load</h3></div>
  <div><wc-icon name="loading"></wc-icon><h3>loading</h3></div>
  <div><wc-icon name="location"></wc-icon><h3>location</h3></div>
  <div><wc-icon name="lock"></wc-icon><h3>lock</h3></div>
  <div><wc-icon name="mail"></wc-icon><h3>mail</h3></div>
  <div><wc-icon name="menu"></wc-icon><h3>menu</h3></div>
  <div><wc-icon name="menu-dot"></wc-icon><h3>menu-dot</h3></div>
  <div><wc-icon name="mute"></wc-icon><h3>mute</h3></div>
  <div><wc-icon name="option"></wc-icon><h3>option</h3></div>
  <div><wc-icon name="phone"></wc-icon><h3>phone</h3></div>
  <div><wc-icon name="pie"></wc-icon><h3>pie</h3></div>
  <div><wc-icon name="pin"></wc-icon><h3>pin</h3></div>
  <div><wc-icon name="plus"></wc-icon><h3>plus</h3></div>
  <div><wc-icon name="post"></wc-icon><h3>post</h3></div>
  <div><wc-icon name="qr"></wc-icon><h3>qr</h3></div>
  <div><wc-icon name="quote"></wc-icon><h3>quote</h3></div>
  <div><wc-icon name="radio-on"></wc-icon><h3>radio-on</h3></div>
  <div><wc-icon name="radio-off"></wc-icon><h3>radio-off</h3></div>
  <div><wc-icon name="right"></wc-icon><h3>right</h3></div>
  <div><wc-icon name="sad"></wc-icon><h3>sad</h3></div>
  <div><wc-icon name="search"></wc-icon><h3>search</h3></div>
  <div><wc-icon name="second"></wc-icon><h3>second</h3></div>
  <div><wc-icon name="setting"></wc-icon><h3>setting</h3></div>
  <div><wc-icon name="share"></wc-icon><h3>share</h3></div>
  <div><wc-icon name="star"></wc-icon><h3>star</h3></div>
  <div><wc-icon name="star-half"></wc-icon><h3>star-half</h3></div>
  <div><wc-icon name="star-full"></wc-icon><h3>star-full</h3></div>
  <div><wc-icon name="switch"></wc-icon><h3>switch</h3></div>
  <div><wc-icon name="tag"></wc-icon><h3>tag</h3></div>
  <div><wc-icon name="talk"></wc-icon><h3>talk</h3></div>
  <div><wc-icon name="third"></wc-icon><h3>third</h3></div>
  <div><wc-icon name="time"></wc-icon><h3>time</h3></div>
  <div><wc-icon name="track"></wc-icon><h3>track</h3></div>
  <div><wc-icon name="trash"></wc-icon><h3>trash</h3></div>
  <div><wc-icon name="trigon-down"></wc-icon><h3>trigon-down</h3></div>
  <div><wc-icon name="trigon-up"></wc-icon><h3>trigon-up</h3></div>
  <div><wc-icon name="unmute"></wc-icon><h3>unmute</h3></div>
  <div><wc-icon name="upload"></wc-icon><h3>upload</h3></div>
  <div><wc-icon name="user"></wc-icon><h3>user</h3></div>
  <div><wc-icon name="vip"></wc-icon><h3>vip</h3></div>
  <div><wc-icon name="warn"></wc-icon><h3>warn</h3></div>
  <div><wc-icon name="wallet"></wc-icon><h3>wallet</h3></div>
  <div><wc-icon name="windows"></wc-icon><h3>windows</h3></div>
</section>