Icon 图标

PixelUI 组件库的图标集合来自 pixel-icon-library. 提供 400+ 独特的像素化矢量图标, 且各自拥有 4 种变体

使用图标

• 如果你想像用例一样直接使用, 你需要全局引入第三方图标库, 才能在项目里直接使用。

安装

TIP

方便使用, 已将 pixel-icon-library 集成到 PixelUI 组件库里, 你可以不用引入第三方图标库及其样式。

使用包管理器

选择一个你喜欢的包管理器

npm

$ npm install @hackernoon/pixel-icon-library

yarn

$ yarn add @hackernoon/pixel-icon-library

pnpm

$ pnpm install @hackernoon/pixel-icon-library

bun

$ bun add @hackernoon/pixel-icon-library

deno

$ 别用 deno, 会变得不幸

引入图标库样式

import '@hackernoon/pixel-icon-library/fonts/iconfont.css'

基础用法

查阅 图标库 icon 名称, 通过 icon 属性传入即可, 使用 type、color、size 修改图标样式

<template>
  <p>
    <px-icon icon="gaming" class="mr-10" />
    <px-icon icon="github" type="primary" class="mr-10" />
    <px-icon icon="management" type="success" class="mr-10" />
    <px-icon icon="plane" type="warning" class="mr-10" />
    <px-icon icon="translate" type="danger" class="mr-10" />
  </p>
  <p>
    <px-icon icon="gaming" size="35" class="mr-10" />
    <px-icon icon="github" type="primary" size="35" class="mr-10" />
    <px-icon icon="management" type="success" size="35" class="mr-10" />
    <px-icon icon="plane" type="warning" size="35" class="mr-10" />
    <px-icon icon="translate" type="danger" size="35" class="mr-10" />
  </p>
  <p>
    <px-icon icon="gaming" size="20" color="red" class="mr-10" />
    <px-icon icon="github" size="20" color="#ff4785" class="mr-10" />
    <px-icon icon="management" size="20" color="rgb(0,212,255)" class="mr-10" />
    <px-icon icon="plane" size="20" color="hsl(265, 100%, 50%)" class="mr-10" />
    <px-icon icon="translate" size="20" color="hwb(38 0% 0%)" class="mr-10" />
  </p>
</template>

图标翻转

通过 flip 和 rotation 属性控制图标翻转

<template>
  <px-icon
    icon="face-thinking"
    flip="horizontal"
    color="orange"
    size="35"
    class="mr-10"
  />
  <px-icon
    icon="face-thinking"
    flip="vertical"
    color="orange"
    size="35"
    class="mr-10"
  />
  <px-icon
    icon="face-thinking"
    flip="both"
    color="orange"
    size="35"
    class="mr-10"
  />
  <px-icon
    icon="face-thinking"
    rotation="270"
    color="orange"
    size="35"
    class="mr-10"
  />
</template>

图标动画

通过 spin、bounce、shake、beat 属性控制图标动画

<template>
  <px-icon icon="startups" spin color="green" size="35" class="mr-10" />
  <px-icon icon="startups" bounce color="green" size="35" class="mr-10" />
  <px-icon icon="startups" shake color="green" size="35" class="mr-10" />
  <px-icon icon="startups" beat color="green" size="35" class="mr-10" />
</template>

Icon API

Props

Name	Description	Type	Default
icon	图标名称	string	-
size	图标大小	number/string	14
type	图标类型	enum - primary | success | warning | danger | base	base
color	图标颜色	string	#212529
flip	图标翻转	enum - horizontal | vertical | both	-
rotation	图标旋转角度	number/string	-
spin	图标旋转动画	boolean	false
bounce	图标上下弹动动画	boolean	false
shake	图标左右摇晃动画	boolean	false
beat	图标心跳动画	boolean	false