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" />
    <px-icon icon="tag-solid" type="sakura" 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" />
    <px-icon icon="tag-solid" type="sakura" 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>

图标集合

Brands

• android
• angellist
• apple
• behance
• bloomberg
• bluesky
• crunchbase
• digg
• discord
• discourse
• facebook-round
• facebook-square
• figma
• giphy
• github
• golden
• google-news
• google
• hackernoon
• huggingface
• imgur
• instagram
• ios
• kaggle
• linkedin
• mastodon
• minds
• newsbreak
• npm
• pinterest
• podcasts
• product-hunt
• reddit
• rss
• steam
• threads
• tiktok
• twitch
• twitter
• unsplash
• viewblocks
• wikipedia
• x
• youtube

Purcats

• business
• cloud
• cybersecurity
• data-science
• finance
• futurism
• gaming
• hackernoon-purcat
• life-hacking
• machine-learning
• management
• media
• product-management
• programming
• remote
• science
• society
• startups
• tech-companies
• tech-stories
• technology
• web3
• writing

Regular

• ad
• analytics
• angle-down
• angle-left
• angle-right
• angle-up
• arrow-alt-circle-down
• arrow-alt-circle-left
• arrow-alt-circle-right
• arrow-alt-circle-up
• arrow-circle-down
• arrow-circle-left
• arrow-circle-right
• arrow-circle-up
• arrow-down
• arrow-left
• arrow-right
• arrow-up
• at
• badge-check
• bank
• bars
• bell-exclaimation
• bell-mute
• bell
• bold
• bolt
• book-heart
• bookmark
• box-usd
• brightness-high
• brightness-low
• bullet-list
• bullhorn
• calender
• cc
• chart-line
• chart-network
• check-box
• check-circle
• check-list
• check
• chevron-down
• chevron-up
• circle-notch
• clipboard
• clock
• cloud-download-alt
• cloud-upload
• code
• cog
• comment-dots
• comment-quote
• comment
• comments
• copy
• credit-card
• crown
• divider
• download-alt
• download
• edit
• ellipses-horizontal-circle
• ellipses-horizontal
• ellipses-vertical-circle
• ellipses-vertical
• envelope
• exclaimation
• exclamation-triangle
• expand
• external-link
• eye-cross
• eye
• face-thinking
• file-import
• filter-alt-circle
• filter
• fire
• flag-checkered
• flag
• folder-open
• folder
• globe-americas
• globe
• grid
• h1
• h2
• h3
• headphones
• heart
• highlight
• hockey-mask
• home
• image
• info-circle
• italics
• lightbulb
• link
• location-pin
• lock-alt
• lock-open
• lock
• login
• logout
• message-dots
• message
• minus
• moon
• music
• newspaper
• numbered-list
• octagon-check
• octagon-times
• page-break
• paperclip
• paragraph
• pause
• pen-nib
• pen
• pencil-ruler
• pencil
• people-carry
• phone-ringing-high
• phone-ringing-low
• plane-departure
• plane
• play
• playlist
• plus
• print
• pro
• question
• quote-left
• quote-right
• receipt
• refresh
• retro-camera
• robot
• save
• search
• seedlings
• share
• shop
• shopping-cart
• shuffle
• sort
• sound-mute
• sound-on
• spinner-third
• spinner
• star-crescent
• star
• strike-through
• sun
• table
• tag
• themes
• thumbsdown
• thumbsup
• thumbtack
• times-circle
• times
• translate
• trash-alt
• trash
• trending
• trophy
• underline
• unlock-alt
• unlock
• upload-alt
• upload
• user-check
• user-headset
• user
• users-crown
• users
• vote-yeah
• wallet
• window-close

Solid

• ad-solid
• analytics-solid
• angle-down-solid
• angle-left-solid
• angle-right-solid
• angle-up-solid
• arrow-alt-circle-down-solid
• arrow-alt-circle-left-solid
• arrow-alt-circle-right-solid
• arrow-alt-circle-up-solid
• arrow-circle-down-solid
• arrow-circle-left-solid
• arrow-circle-right-solid
• arrow-circle-up-solid
• arrow-down-solid
• arrow-left-solid
• arrow-right-solid
• arrow-up-solid
• at-solid
• badge-check-solid
• bank-solid
• bars-solid
• bell-exclaimation-solid
• bell-mute-solid
• bell-solid
• bold-solid
• bolt-solid
• book-heart-solid
• bookmark-solid
• box-usd-solid
• brightness-high-solid
• brightness-low-solid
• bullet-list-solid
• bullhorn-solid
• calender-solid
• cc-solid
• chart-line-solid
• chart-network-solid
• check-box-solid
• check-circle-solid
• check-list-solid
• check-solid
• chevron-down-solid
• chevron-up-solid
• circle-notch-solid
• clipboard-solid
• clock-solid
• cloud-download-solid
• cloud-upload-solid
• code-solid
• cog-solid
• comment-dots-solid
• comment-quote-solid
• comment-solid
• comments-solid
• copy-solid
• credit-card-solid
• crown-solid
• divider-solid
• download-alt-solid
• download-solid
• edit-solid
• ellipses-horizontal-circle-solid
• ellipses-horizontal-solid
• ellipses-vertical-circle-solid
• ellipses-vertical-solid
• envelope-solid
• exclaimation-solid
• exclamation-triangle-solid
• expand-solid
• external-link-solid
• eye-cross-solid
• eye-solid
• face-thinking-solid
• file-import-solid
• filter-alt-circle-solid
• filter-solid
• fire-solid
• flag-checkered-solid
• flag-solid
• folder-open-solid
• folder-solid
• globe-americas-solid
• globe-solid
• grid-solid
• heading-1-solid
• heading-2-solid
• heading-3-solid
• headphones-solid
• heart-solid
• highlight-solid
• hockey-mask-solid
• home-solid
• image-solid
• info-circle-solid
• italics-solid
• lightbulb-solid
• link-solid
• location-pin-solid
• lock-alt-solid
• lock-open-solid
• lock-solid
• login-solid
• logout-solid
• message-dots-solid
• message-solid
• minus-solid
• moon-solid
• music-solid
• newspaper-solid
• numbered-list-solid
• octagon-check-solid
• octagon-times-solid
• page-break-solid
• paperclip-solid
• paragraph-solid
• pause-solid
• pen-nib-solid
• pen-solid
• pencil-ruler-solid
• pencil-solid
• people-carry-solid
• phone-ringing-high-solid
• phone-ringing-low-solid
• plane-departure-solid
• plane-solid
• play-solid
• playlist-solid
• plus-solid
• print-solid
• pro-solid
• question-solid
• quote-left-solid
• quote-right-solid
• receipt-solid
• refresh-solid
• retro-camera-solid
• robot-solid
• save-solid
• search-solid
• seedlings-solid
• share-solid
• shop-solid
• shopping-cart-solid
• shuffle-solid
• sort-solid
• sound-mute-solid
• sound-on-solid
• spinner-solid
• spinner-third-solid
• star-crescent-solid
• star-solid
• strike-through-solid
• sun-solid
• table-solid
• tag-solid
• themes-solid
• thumbsdown-solid
• thumbsup-solid
• thumbtack-solid
• times-circle-solid
• times-solid
• translate-solid
• trash-alt-solid
• trash-solid
• trending-solid
• trophy-solid
• underline-solid
• unlock-alt-solid
• unlock-solid
• upload-alt-solid
• upload-solid
• user-check-solid
• user-headset-solid
• user-solid
• users-crown-solid
• users-solid
• vote-yeah-solid
• wallet-solid
• window-close-solid

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Icon API

Props

Name	Description	Type	Default
icon	图标名称	string	-
size	图标大小(px)	number | string	14px
type	图标类型	enum	base
color	图标颜色	string	#212529
flip	图标翻转	enum	-
rotation	旋转角度	number | string	-
spin	是否启用旋转动画	boolean	false
bounce	是否启用跳动动画	boolean	false
shake	是否启用摇晃动画	boolean	false
beat	是否启用跳动动画	boolean	false