本页目录

Icon

版本要求:
@ray-js/ray≥0.5.10@ray-js/icons≥1.6.0

描述

图标组件,提供丰富的图标库,支持自定义大小和颜色。@ray-js/ray@1.6.0 版本之后不再内置 Icon 组件,需要单独安装 @ray-js/icons。

属性

属性类型必填默认值说明
type"icon-warning" | "icon-right" | "icon-up" | "icon-down" | "icon-right-copy" | "icon-right-copy1" | "icon-a-cloudsunboltfill" | "icon-a-cloudhailfill" | "icon-a-cloudrainfill" | "icon-deskclock" | "icon-a-cloudsleetfill" | "icon-a-arrowtrianglecapsulepath" | "icon-a-cloudfogfill" | "icon-a-clouddrizzlefill" | "icon-a-cloudsunrainfill" | "icon-a-crownfill" | "icon-a-deskclockfill" | "icon-a-envelopeopenfill" | "icon-a-desktopcomputerandarrowdown" | "icon-a-ferryfill" | "icon-a-dropfill" | "icon-a-cloudmoonfill" | "icon-a-icloudandarrowdownfill" | "icon-a-heartfill" | "icon-a-icloudcirclefill" | "icon-a-giftfill" | "icon-a-handpointupleftfill" | "icon-icon" | "icon-a-exclamationmarkicloudfill" | "icon-a-facesmilingfill" | "icon-a-cloudsunfill" | "icon-a-figurewalk" | "icon-a-envelopebadge" | "icon-a-locationnorthfill" | "icon-a-minussquarefill" | "icon-a-icloudslashfill" | "icon-a-lockicloudfill" | "icon-a-flamefill" | "icon-left" | "icon-a-linkicloudfill" | "icon-a-micfill" | "icon-icon-2" | "icon-a-latch2casefill" | "icon-a-exclamationmarkbubblefill" | "icon-a-pausefill" | "icon-a-paintbrushfill" | "icon-a-moonfill" | "icon-a-keyicloudfill" | "icon-a-messagefill" | "icon-a-envelopefill" | "icon-a-moonstarsfill" | "icon-a-icloudandarrowupfill" | "icon-checkmark-3" | "icon-a-locationcirclefill" | "icon-a-forwardendaltfill" | "icon-a-clockfill" | "icon-bonjour" | "icon-a-icloudcircle" | "icon-a-leaffill" | "icon-a-paintbrushpointedfill" | "icon-a-cloudsnowfill" | "icon-a-playfill" | "icon-a-plussquarefill" | "icon-a-minuscirclefill" | "icon-a-personicloudfill" | "icon-a-phonefill" | "icon-a-pawprintfill" | "icon-plus" | "icon-a-scribblevariable" | "icon-a-phoneandwaveformfill" | "icon-a-phonedownfill" | "icon-a-pluscirclefill" | "icon-a-repeat1" | "icon-a-printerfillandpaperfill" | "icon-a-scrollfill" | "icon-snow" | "icon-a-speakerwave1fill" | "icon-scissors" | "icon-a-playrectanglefill" | "icon-a-globeamericasfill" | "icon-a-dotradiowavesleftandright" | "icon-minus" | "icon-a-stopfill" | "icon-a-suitcasefill" | "icon-a-sunrisefill" | "icon-a-thermometersunfill" | "icon-a-trainsidefrontcar" | "icon-a-speakerwave3fill" | "icon-a-cloudheavyrainfill" | "icon-a-eyedropperhalffull" | "icon-a-sunminfill" | "icon-a-sunsetfill" | "icon-a-timersquare" | "icon-stopwatch" | "icon-thermometer" | "icon-repeat" | "icon-a-stopwatchfill" | "icon-a-sunmaxfill" | "icon-a-icloudfill" | "icon-a-tramfill" | "icon-tornado" | "icon-a-videoslashfill" | "icon-personalhotspot" | "icon-a-thermometersnowflake" | "icon-a-sunhazefill" | "icon-a-videofill" | "icon-sparkles" | "icon-a-facemaskfill" | "icon-a-wave3backwardcirclefill" | "icon-a-wave3leftcirclefill" | "icon-a-wandandstarsinverse" | "icon-a-wave3rightcirclefill" | "icon-xmark" | "icon-a-wave3right" | "icon-a-waveformandmic" | "icon-a-wifiexclamationmark" | "icon-wifi" | "icon-a-xmarkicloudfill" | "icon-wind" | "icon-timer" | "icon-a-wrenchandscrewdriverfill" | "icon-a-wave3forwardcirclefill" | "icon-a-lockfill" | "icon-a-wifislash" | "icon-a-windsnow" | "icon-a-wave3forward" | "icon-cancel" | "icon-a-arrowbackward" | "icon-a-arrowdown" | "icon-alarm" | "icon-a-alarmfill" | "icon-a-airplanedeparture" | "icon-a-arrowlefttolinealt" | "icon-a-arrowforward" | "icon-airplane" | "icon-a-arrow2squarepath" | "icon-a-antennaradiowavesleftandright" | "icon-a-arrowshapeturnuprightfill" | "icon-a-arrowcounterclockwise" | "icon-a-arrowturndownleft" | "icon-a-arrowturnupleft" | "icon-a-airplanearrival" | "icon-a-boltfill" | "icon-a-arrowturnrightup" | "icon-a-arrowcounterclockwiseicloudfill" | "icon-a-bellfill" | "icon-a-arrowupanddownandarrowleftandright" | "icon-a-beddoublefill" | "icon-a-arrowshapeturnupleft2fill" | "icon-a-arrowtrianglerightfillandlineverticalandarr" | "icon-a-bolthorizontalicloudfill" | "icon-a-boltheartfill" | "icon-a-arrowupleftanddownrightandarrowuprightan" | "icon-a-arrowclockwiseicloudfill" | "icon-a-arrowupbackwardandarrowdownforward" | "icon-a-arrowturndownright" | "icon-bold" | "icon-a-arrowleftarrowright" | "icon-a-bolthorizontalfill" | "icon-checkmark" | "icon-a-arrowrighttolinealt" | "icon-a-bubblerightfill" | "icon-checkmark-2" | "icon-clock" | "icon-a-carfill" | "icon-a-backwardendaltfill" | "icon-checkmark-4" | "icon-a-chevronright2" | "icon-a-cloudboltrainfill" | "icon-a-bolthorizontalcirclefill" | "icon-a-chevronleft2" | "icon-a-chevroncompactdown" | "icon-a-briefcasefill" | "icon-a-arrowturnupright" | "icon-a-cloudboltfill" | "icon-a-cloudfill" | "icon-a-bubbleleftandbubblerightfill" | "icon-a-bellbadgefill" | "icon-checkmark-1" | "icon-a-cloudmoonrainfill" | "icon-a-chevroncompactright" | "icon-a-crossfill" | "icon-a-busfill" | "icon-a-arrowturnleftup" | "icon-a-cloudmoonboltfill" | "icon-a-arrowtriangleleftfillandlineverticalandarro" | "icon-a-checkmarkicloudfill"是icon-warning图标类型(内置图标名)
sizenumber否16图标大小,单位 px
colorstring否#333333图标颜色

合法值

type
值说明最低版本
icon-warningwarning 图标(字形编码 U+E600)-
icon-right又 图标(字形编码 U+E72F)-
icon-up上 图标(字形编码 U+E731)-
icon-down下 图标(字形编码 U+E7A1)-
icon-right-copy又 图标(字形编码 U+E7A2)-
icon-right-copy1又 图标(字形编码 U+E7A3)-
icon-a-cloudsunboltfillcloud.sun.bolt.fill 图标(字形编码 U+E727)-
icon-a-cloudhailfillcloud.hail.fill 图标(字形编码 U+E728)-
icon-a-cloudrainfillcloud.rain.fill 图标(字形编码 U+E729)-
icon-deskclockdeskclock 图标(字形编码 U+E72A)-
icon-a-cloudsleetfillcloud.sleet.fill 图标(字形编码 U+E72B)-
icon-a-arrowtrianglecapsulepatharrow.triangle.capsulepath 图标(字形编码 U+E72C)-
icon-a-cloudfogfillcloud.fog.fill 图标(字形编码 U+E72D)-
icon-a-clouddrizzlefillcloud.drizzle.fill 图标(字形编码 U+E72E)-
icon-a-cloudsunrainfillcloud.sun.rain.fill 图标(字形编码 U+E730)-
icon-a-crownfillcrown.fill 图标(字形编码 U+E732)-
icon-a-deskclockfilldeskclock.fill 图标(字形编码 U+E733)-
icon-a-envelopeopenfillenvelope.open.fill 图标(字形编码 U+E734)-
icon-a-desktopcomputerandarrowdowndesktopcomputer.and.arrow.down 图标(字形编码 U+E735)-
icon-a-ferryfillferry.fill 图标(字形编码 U+E736)-
icon-a-dropfilldrop.fill 图标(字形编码 U+E737)-
icon-a-cloudmoonfillcloud.moon.fill 图标(字形编码 U+E738)-
icon-a-icloudandarrowdownfillicloud.and.arrow.down.fill 图标(字形编码 U+E739)-
icon-a-heartfillheart.fill 图标(字形编码 U+E73A)-
icon-a-icloudcirclefillicloud.circle.fill 图标(字形编码 U+E73B)-
icon-a-giftfillgift.fill 图标(字形编码 U+E73C)-
icon-a-handpointupleftfillhand.point.up.left.fill 图标(字形编码 U+E73D)-
icon-iconicon 图标(字形编码 U+E73E)-
icon-a-exclamationmarkicloudfillexclamationmark.icloud.fill 图标(字形编码 U+E73F)-
icon-a-facesmilingfillface.smiling.fill 图标(字形编码 U+E740)-
icon-a-cloudsunfillcloud.sun.fill 图标(字形编码 U+E741)-
icon-a-figurewalkfigure.walk 图标(字形编码 U+E742)-
icon-a-envelopebadgeenvelope.badge 图标(字形编码 U+E743)-
icon-a-locationnorthfilllocation.north.fill 图标(字形编码 U+E744)-
icon-a-minussquarefillminus.square.fill 图标(字形编码 U+E745)-
icon-a-icloudslashfillicloud.slash.fill 图标(字形编码 U+E746)-
icon-a-lockicloudfilllock.icloud.fill 图标(字形编码 U+E747)-
icon-a-flamefillflame.fill 图标(字形编码 U+E748)-
icon-lefticon-1 图标(字形编码 U+E749)-
icon-a-linkicloudfilllink.icloud.fill 图标(字形编码 U+E74A)-
icon-a-micfillmic.fill 图标(字形编码 U+E74B)-
icon-icon-2icon-2 图标(字形编码 U+E74C)-
icon-a-latch2casefilllatch.2.case.fill 图标(字形编码 U+E74D)-
icon-a-exclamationmarkbubblefillexclamationmark.bubble.fill 图标(字形编码 U+E74E)-
icon-a-pausefillpause.fill 图标(字形编码 U+E74F)-
icon-a-paintbrushfillpaintbrush.fill 图标(字形编码 U+E750)-
icon-a-moonfillmoon.fill 图标(字形编码 U+E751)-
icon-a-keyicloudfillkey.icloud.fill 图标(字形编码 U+E752)-
icon-a-messagefillmessage.fill 图标(字形编码 U+E753)-
icon-a-envelopefillenvelope.fill 图标(字形编码 U+E754)-
icon-a-moonstarsfillmoon.stars.fill 图标(字形编码 U+E755)-
icon-a-icloudandarrowupfillicloud.and.arrow.up.fill 图标(字形编码 U+E756)-
icon-checkmark-3checkmark-3 图标(字形编码 U+E757)-
icon-a-locationcirclefilllocation.circle.fill 图标(字形编码 U+E758)-
icon-a-forwardendaltfillforward.end.alt.fill 图标(字形编码 U+E759)-
icon-a-clockfillclock.fill 图标(字形编码 U+E75A)-
icon-bonjourbonjour 图标(字形编码 U+E75B)-
icon-a-icloudcircleicloud.circle 图标(字形编码 U+E75C)-
icon-a-leaffillleaf.fill 图标(字形编码 U+E75D)-
icon-a-paintbrushpointedfillpaintbrush.pointed.fill 图标(字形编码 U+E75E)-
icon-a-cloudsnowfillcloud.snow.fill 图标(字形编码 U+E75F)-
icon-a-playfillplay.fill 图标(字形编码 U+E760)-
icon-a-plussquarefillplus.square.fill 图标(字形编码 U+E761)-
icon-a-minuscirclefillminus.circle.fill 图标(字形编码 U+E762)-
icon-a-personicloudfillperson.icloud.fill 图标(字形编码 U+E763)-
icon-a-phonefillphone.fill 图标(字形编码 U+E764)-
icon-a-pawprintfillpawprint.fill 图标(字形编码 U+E765)-
icon-plusplus 图标(字形编码 U+E766)-
icon-a-scribblevariablescribble.variable 图标(字形编码 U+E767)-
icon-a-phoneandwaveformfillphone.and.waveform.fill 图标(字形编码 U+E768)-
icon-a-phonedownfillphone.down.fill 图标(字形编码 U+E769)-
icon-a-pluscirclefillplus.circle.fill 图标(字形编码 U+E76A)-
icon-a-repeat1repeat.1 图标(字形编码 U+E76B)-
icon-a-printerfillandpaperfillprinter.fill.and.paper.fill 图标(字形编码 U+E76C)-
icon-a-scrollfillscroll.fill 图标(字形编码 U+E76D)-
icon-snowsnow 图标(字形编码 U+E76E)-
icon-a-speakerwave1fillspeaker.wave.1.fill 图标(字形编码 U+E76F)-
icon-scissorsscissors 图标(字形编码 U+E770)-
icon-a-playrectanglefillplay.rectangle.fill 图标(字形编码 U+E771)-
icon-a-globeamericasfillglobe.americas.fill 图标(字形编码 U+E772)-
icon-a-dotradiowavesleftandrightdot.radiowaves.left.and.right 图标(字形编码 U+E773)-
icon-minusminus 图标(字形编码 U+E774)-
icon-a-stopfillstop.fill 图标(字形编码 U+E775)-
icon-a-suitcasefillsuitcase.fill 图标(字形编码 U+E776)-
icon-a-sunrisefillsunrise.fill 图标(字形编码 U+E777)-
icon-a-thermometersunfillthermometer.sun.fill 图标(字形编码 U+E778)-
icon-a-trainsidefrontcartrain.side.front.car 图标(字形编码 U+E779)-
icon-a-speakerwave3fillspeaker.wave.3.fill 图标(字形编码 U+E77A)-
icon-a-cloudheavyrainfillcloud.heavyrain.fill 图标(字形编码 U+E77B)-
icon-a-eyedropperhalffulleyedropper.halffull 图标(字形编码 U+E77C)-
icon-a-sunminfillsun.min.fill 图标(字形编码 U+E77D)-
icon-a-sunsetfillsunset.fill 图标(字形编码 U+E77E)-
icon-a-timersquaretimer.square 图标(字形编码 U+E77F)-
icon-stopwatchstopwatch 图标(字形编码 U+E780)-
icon-thermometerthermometer 图标(字形编码 U+E781)-
icon-repeatrepeat 图标(字形编码 U+E782)-
icon-a-stopwatchfillstopwatch.fill 图标(字形编码 U+E783)-
icon-a-sunmaxfillsun.max.fill 图标(字形编码 U+E784)-
icon-a-icloudfillicloud.fill 图标(字形编码 U+E785)-
icon-a-tramfilltram.fill 图标(字形编码 U+E786)-
icon-tornadotornado 图标(字形编码 U+E787)-
icon-a-videoslashfillvideo.slash.fill 图标(字形编码 U+E788)-
icon-personalhotspotpersonalhotspot 图标(字形编码 U+E789)-
icon-a-thermometersnowflakethermometer.snowflake 图标(字形编码 U+E78A)-
icon-a-sunhazefillsun.haze.fill 图标(字形编码 U+E78B)-
icon-a-videofillvideo.fill 图标(字形编码 U+E78C)-
icon-sparklessparkles 图标(字形编码 U+E78D)-
icon-a-facemaskfillfacemask.fill 图标(字形编码 U+E78E)-
icon-a-wave3backwardcirclefillwave.3.backward.circle.fill 图标(字形编码 U+E78F)-
icon-a-wave3leftcirclefillwave.3.left.circle.fill 图标(字形编码 U+E790)-
icon-a-wandandstarsinversewand.and.stars.inverse 图标(字形编码 U+E791)-
icon-a-wave3rightcirclefillwave.3.right.circle.fill 图标(字形编码 U+E792)-
icon-xmarkxmark 图标(字形编码 U+E793)-
icon-a-wave3rightwave.3.right 图标(字形编码 U+E794)-
icon-a-waveformandmicwaveform.and.mic 图标(字形编码 U+E795)-
icon-a-wifiexclamationmarkwifi.exclamationmark 图标(字形编码 U+E796)-
icon-wifiwifi 图标(字形编码 U+E797)-
icon-a-xmarkicloudfillxmark.icloud.fill 图标(字形编码 U+E798)-
icon-windwind 图标(字形编码 U+E799)-
icon-timertimer 图标(字形编码 U+E79A)-
icon-a-wrenchandscrewdriverfillwrench.and.screwdriver.fill 图标(字形编码 U+E79B)-
icon-a-wave3forwardcirclefillwave.3.forward.circle.fill 图标(字形编码 U+E79C)-
icon-a-lockfilllock.fill 图标(字形编码 U+E79D)-
icon-a-wifislashwifi.slash 图标(字形编码 U+E79E)-
icon-a-windsnowwind.snow 图标(字形编码 U+E79F)-
icon-a-wave3forwardwave.3.forward 图标(字形编码 U+E7A0)-
icon-cancel取消 图标(字形编码 U+E6EA)-
icon-a-arrowbackwardarrow.backward 图标(字形编码 U+E6EB)-
icon-a-arrowdownarrow.down 图标(字形编码 U+E6EC)-
icon-alarmalarm 图标(字形编码 U+E6ED)-
icon-a-alarmfillalarm.fill 图标(字形编码 U+E6EE)-
icon-a-airplanedepartureairplane.departure 图标(字形编码 U+E6EF)-
icon-a-arrowlefttolinealtarrow.left.to.line.alt 图标(字形编码 U+E6F0)-
icon-a-arrowforwardarrow.forward 图标(字形编码 U+E6F1)-
icon-airplaneairplane 图标(字形编码 U+E6F2)-
icon-a-arrow2squarepatharrow.2.squarepath 图标(字形编码 U+E6F3)-
icon-a-antennaradiowavesleftandrightantenna.radiowaves.left.and.right 图标(字形编码 U+E6F4)-
icon-a-arrowshapeturnuprightfillarrowshape.turn.up.right.fill 图标(字形编码 U+E6F5)-
icon-a-arrowcounterclockwisearrow.counterclockwise 图标(字形编码 U+E6F6)-
icon-a-arrowturndownleftarrow.turn.down.left 图标(字形编码 U+E6F7)-
icon-a-arrowturnupleftarrow.turn.up.left 图标(字形编码 U+E6F8)-
icon-a-airplanearrivalairplane.arrival 图标(字形编码 U+E6F9)-
icon-a-boltfillbolt.fill 图标(字形编码 U+E6FA)-
icon-a-arrowturnrightuparrow.turn.right.up 图标(字形编码 U+E6FB)-
icon-a-arrowcounterclockwiseicloudfillarrow.counterclockwise.icloud.fill 图标(字形编码 U+E6FC)-
icon-a-bellfillbell.fill 图标(字形编码 U+E6FD)-
icon-a-arrowupanddownandarrowleftandrightarrow.up.and.down.and.arrow.left.and.right 图标(字形编码 U+E6FE)-
icon-a-beddoublefillbed.double.fill 图标(字形编码 U+E6FF)-
icon-a-arrowshapeturnupleft2fillarrowshape.turn.up.left.2.fill 图标(字形编码 U+E700)-
icon-a-arrowtrianglerightfillandlineverticalandarrarrowtriangle.right.fill.and.line.vertical.and.arr 图标(字形编码 U+E701)-
icon-a-bolthorizontalicloudfillbolt.horizontal.icloud.fill 图标(字形编码 U+E702)-
icon-a-boltheartfillbolt.heart.fill 图标(字形编码 U+E703)-
icon-a-arrowupleftanddownrightandarrowuprightanarrow.up.left.and.down.right.and.arrow.up.right.an 图标(字形编码 U+E704)-
icon-a-arrowclockwiseicloudfillarrow.clockwise.icloud.fill 图标(字形编码 U+E705)-
icon-a-arrowupbackwardandarrowdownforwardarrow.up.backward.and.arrow.down.forward 图标(字形编码 U+E706)-
icon-a-arrowturndownrightarrow.turn.down.right 图标(字形编码 U+E707)-
icon-boldbold 图标(字形编码 U+E708)-
icon-a-arrowleftarrowrightarrow.left.arrow.right 图标(字形编码 U+E709)-
icon-a-bolthorizontalfillbolt.horizontal.fill 图标(字形编码 U+E70A)-
icon-checkmarkcheckmark 图标(字形编码 U+E70B)-
icon-a-arrowrighttolinealtarrow.right.to.line.alt 图标(字形编码 U+E70C)-
icon-a-bubblerightfillbubble.right.fill 图标(字形编码 U+E70D)-
icon-checkmark-2checkmark-2 图标(字形编码 U+E70E)-
icon-clockclock 图标(字形编码 U+E70F)-
icon-a-carfillcar.fill 图标(字形编码 U+E710)-
icon-a-backwardendaltfillbackward.end.alt.fill 图标(字形编码 U+E711)-
icon-checkmark-4checkmark-4 图标(字形编码 U+E712)-
icon-a-chevronright2chevron.right.2 图标(字形编码 U+E713)-
icon-a-cloudboltrainfillcloud.bolt.rain.fill 图标(字形编码 U+E714)-
icon-a-bolthorizontalcirclefillbolt.horizontal.circle.fill 图标(字形编码 U+E715)-
icon-a-chevronleft2chevron.left.2 图标(字形编码 U+E716)-
icon-a-chevroncompactdownchevron.compact.down 图标(字形编码 U+E717)-
icon-a-briefcasefillbriefcase.fill 图标(字形编码 U+E718)-
icon-a-arrowturnuprightarrow.turn.up.right 图标(字形编码 U+E719)-
icon-a-cloudboltfillcloud.bolt.fill 图标(字形编码 U+E71A)-
icon-a-cloudfillcloud.fill 图标(字形编码 U+E71B)-
icon-a-bubbleleftandbubblerightfillbubble.left.and.bubble.right.fill 图标(字形编码 U+E71C)-
icon-a-bellbadgefillbell.badge.fill 图标(字形编码 U+E71D)-
icon-checkmark-1checkmark-1 图标(字形编码 U+E71E)-
icon-a-cloudmoonrainfillcloud.moon.rain.fill 图标(字形编码 U+E71F)-
icon-a-chevroncompactrightchevron.compact.right 图标(字形编码 U+E720)-
icon-a-crossfillcross.fill 图标(字形编码 U+E721)-
icon-a-busfillbus.fill 图标(字形编码 U+E722)-
icon-a-arrowturnleftuparrow.turn.left.up 图标(字形编码 U+E723)-
icon-a-cloudmoonboltfillcloud.moon.bolt.fill 图标(字形编码 U+E724)-
icon-a-arrowtriangleleftfillandlineverticalandarroarrowtriangle.left.fill.and.line.vertical.and.arro 图标(字形编码 U+E725)-
icon-a-checkmarkicloudfillcheckmark.icloud.fill 图标(字形编码 U+E726)-

示例代码

基础用法

import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-right" size={24} />
      <Icon type="icon-warning" size={24} />
      <Icon type="icon-checkmark" size={24} />
      <Icon type="icon-cancel" size={24} />
    </View>
  );
}

自定义大小

import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', alignItems: 'center', gap: 15 }}>
      <Icon type="icon-right" size={16} color="#007aff" />
      <Icon type="icon-right" size={24} color="#007aff" />
      <Icon type="icon-right" size={32} color="#007aff" />
      <Icon type="icon-right" size={48} color="#007aff" />
    </View>
  );
}

自定义颜色

import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-warning" size={30} color="#ff4d4f" />
      <Icon type="icon-checkmark" size={30} color="#52c41a" />
      <Icon type="icon-a-cloudrainfill" size={30} color="#1890ff" />
      <Icon type="icon-a-cloudsleetfill" size={30} color="#722ed1" />
    </View>
  );
}

效果