Icon 图标

(todo 需要说明 Icon 组件从 @rexd/icon 包引入)

使用场景#

一组便于使用的 SVG 图标。

示例#

基本用法#

arrow-left

add-bold

add

arrow-down-filling

arrow-left-filling

arrow-down

arrow-down-bold

arrow-left-bold

arrow-right-filling

arrow-right

arrow-up-filling

arrow-right-bold

arrow-up-bold

close-bold

direction-left

minus

direction-right

direction-down

minus-bold

direction-up

select

database-config

function

diamond

arrow-right-circle

ashbin

browse

bottom

back

bad

arrow-double-left

arrow-left-circle

arrow-double-right

caps-lock

camera

chart-bar

attachment

code

check-item

calendar

comment

column-vertical

column-horizontal

complete

chart-pie

cry

customer-service

delete

copy

cut

data-view

direction-down-circle

discount

download

electronics

drag

ellipsis

export

explain

edit

eye-close

error

favorite

file-common

file-delete

file-add

film

fabulous

file

folder-close

filter

good

hide

home

history

file-open

forward

import

image-text

keyboard-26

keyboard-9

link

layout

fullscreen-shrink

layers

lock

fullscreen-expand

map

meh

help

minus-circle

modular

notification

mic

pad

operation

play

mobile-phone

navigation

pdf

prompt

move

refresh

run-up

picture

run-in

save

scanning

security

sign-out

stop

success

smile

switch

setting

survey

task

skip

text

time

telephone-out

toggle-left

toggle-right

telephone

top

unlock

user

upload

work

training

warning

zoom-in

zoom-out

select-bold

caps-unlock-filling

comment-filling

check-item-filling

clock-filling

delete-filling

decline-filling

dynamic-filling

intermediate-filling

favorite-filling

layout-filling

help-filling

history-filling

filter-filling

file-common-filling

news-filling

edit-filling

fullscreen-expand-filling

smile-filling

rise-filling

picture-filling

notification-filling

user-filling

setting-filling

switch-filling

work-filling

task-filling

success-filling

warning-filling

folder-filling

map-filling

prompt-filling

meh-filling

cry-filling

top-filling

home-filling

sorting

column-3

column-4

add-circle

adjust

arrow-up-circle

inline

// 以下变量从其他模块中引入：
//  ICON_TYPE_LIST, Icon

() => {
  const [query, setQuery] = useState('');

  return (
    <Box>
      <Box>
        <Input placeholder="输入图标名称进行检索" onChange={setQuery} />
      </Box>
      <Grid columns={5}>
        {ICON_TYPE_LIST.filter((name) => !query || name.includes(query)).map((iconType) => (
          <GridItem key={iconType} textAlign="center" py="l">
            <Icon type={iconType} style={{ height: '50px', width: '50px' }} />
            <Box fontSize="16px">{iconType}</Box>
          </GridItem>
        ))}
      </Grid>
    </Box>
  );
}

// 以下变量从其他模块中引入：
//  ICON_TYPE_LIST, Icon

() => {
  const [query, setQuery] = useState('');

  return (
    <Box>
      <Box>
        <Input placeholder="输入图标名称进行检索" onChange={setQuery} />
      </Box>
      <Grid columns={5}>
        {ICON_TYPE_LIST.filter((name) => !query || name.includes(query)).map((iconType) => (
          <GridItem key={iconType} textAlign="center" py="l">
            <Icon type={iconType} style={{ height: '50px', width: '50px' }} />
            <Box fontSize="16px">{iconType}</Box>
          </GridItem>
        ))}
      </Grid>
    </Box>
  );
}

Iconfont 图标库#

借助 useIconfont 你可以快速获取任意 Iconfont 图标库。

inline

// 以下变量从其他模块中引入：
//  useIconfont

() => {
  const SvgIcon = useIconfont({
    scriptUrl: '//at.alicdn.com/t/font_1062849_wshbvt9mp1.js',
  });

  return (
    <Group fontSize="body">
      <SvgIcon type="audio" size="40px" />
      <SvgIcon type="mouse" size="40px" />
      <SvgIcon type="eye" size="40px" />
      <SvgIcon type="gesture" size="40px" />
    </Group>
  );
}

// 以下变量从其他模块中引入：
//  useIconfont

() => {
  const SvgIcon = useIconfont({
    scriptUrl: '//at.alicdn.com/t/font_1062849_wshbvt9mp1.js',
  });

  return (
    <Group fontSize="body">
      <SvgIcon type="audio" size="40px" />
      <SvgIcon type="mouse" size="40px" />
      <SvgIcon type="eye" size="40px" />
      <SvgIcon type="gesture" size="40px" />
    </Group>
  );
}

API#

字段	描述
type*	`IconType`