dls-icons-react

dls-icons-react

Installation

npm i -D dls-icons-react

Usage

As React component

Demo →

import { IconArrowRight } from 'dls-icons-react'

export default function Title() {
  return (
    <div className="title">
      <h1>
        Hello Icons
        <IconArrowRight style={{ color: '#999', marginLeft: 5 }} />
      </h1>
    </div>
  )
}

Props

• spin: boolean

  Whether the icon is spinning. Default: false. You can use --dls-icon-spin-duration to customize the time it takes for one turn. The default value is 1s.

• active: boolean

  Whether the icon is active. Default: undefined. If active is undefined, the icon will be in default state. Otherwise it will be in active or inactive state depending on the truthiness of active.

  Note To make active prop work properly, you should render a SharedResources component in your root component. eg.

  import { SharedResources } from 'dls-icons-react'
  
  export default function App() {
    return (
      <div className="app">
        <SharedResources />
        ...
      </div>
    )
  }
  

As icon data

import { dataArrowRight } from 'dls-icons-react'

/*
{
  {
    name: 'icon-arrow-right',
    content: '<path d="..." ...',
    width: 24,
    height: 24
  }
}
*/
console.log(dataArrowRight)

Available Icons

IconAbTest	IconAbTestSolid	IconAbstract	IconAbstractSolid	IconAcademicCap
IconAcademicCapSolid	IconAdDeliveryCircleSolid	IconAi	IconAlignBottom	IconAlignCenter
IconAlignLeft	IconAlignRight	IconAlignTop	IconAndroid	IconAnticlockwise
IconAppStore	IconApps	IconAppsSettings	IconAppsSettingsSolid	IconAppsSolid
IconArrowCurveDownRightSolid	IconArrowCurveUpRightSolid	IconArrowDown	IconArrowDownSolid	IconArrowLeft
IconArrowLeftSolid	IconArrowRight	IconArrowRightSolid	IconArrowToBottom	IconArrowToTop
IconArrowToTopSoild	IconArrowUp	IconArrowUpSolid	IconAsterisk	IconAttribute
IconAttributeSolid	IconAudio	IconAudioSolid	IconBabyBottle	IconBabyBottleSolid
IconBackground	IconBackgroundSolid	IconBarChart	IconBarChartAlt	IconBarChartAltSolid
IconBarChartSolid	IconBarChartSquare	IconBarChartSquareSolid	IconBell	IconBellSolid
IconBold	IconBook	IconBookBookmark	IconBookBookmarkSolid	IconBookSolid
IconBookmark	IconBookmarkSolid	IconBooksBookmark	IconBooksBookmarkSolid	IconBox
IconBoxSolid	IconBuilding	IconBuildingSolid	IconBulb	IconBulbDash
IconBulbDashSolid	IconBulbSolid	IconBullseye	IconBullseyeHit	IconBullseyeHitSolid
IconCalendar	IconCalendarCny	IconCalendarCnySolid	IconCalendarHeart	IconCalendarHeartSolid
IconCalendarSolid	IconCamera	IconCameraAdd	IconCameraAddSolid	IconCameraSolid
IconCar	IconCarSolid	IconCaretDown	IconCaretLeft	IconCaretRight
IconCaretUp	IconCellphone	IconCellphoneSolid	IconChat	IconChatSolid
IconCheck	IconCheckCircle	IconCheckCircleSolid	IconCheckDesktop	IconCheckDesktopSolid
IconCheckSquare	IconCheckSquareSolid	IconChevronDoubleDown	IconChevronDoubleLeft	IconChevronDoubleRight
IconChevronDoubleUp	IconChevronDown	IconChevronLeft	IconChevronRight	IconChevronRightCircle
IconChevronRightCircleSolid	IconChevronUp	IconCircleExtend	IconCircleExtendSolid	IconCircleRotation
IconCircleRotationSolid	IconClock	IconClockSolid	IconClockwise	IconCloudUploadSolid
IconCnyCircle	IconCnyCircleSolid	IconCnyRefund	IconCnyWallet	IconCnyWalletSolid
IconCoin	IconCoinSolid	IconColorPalette	IconColorPaletteSolid	IconCompass
IconCompassSolid	IconComponent	IconComponentSolid	IconCopy	IconCopySolid
IconCouponMinus	IconCouponMinusSolid	IconCouponPercent	IconCouponPercentSolid	IconCrop
IconCropSolid	IconCrown	IconCrownSolid	IconCube	IconCubeEye
IconCubeEyeSolid	IconCubeSolid	IconCurveSquare	IconCurveSquareSolid	IconCustomer
IconCustomerService	IconCustomerSettings	IconCustomerSettingsSolid	IconCustomerSolid	IconCut
IconCutSolid	IconData	IconDataMarket	IconDataMarketSolid	IconDataSolid
IconDatabase	IconDatabaseSolid	IconDesktop	IconDesktopSolid	IconDetailList
IconDetailListSolid	IconDiamond	IconDiamondSolid	IconDollarCircle	IconDollarCircleSolid
IconDoubleCircle	IconDoubleCircleSolid	IconDownload	IconDragIndicator	IconEdit
IconEditSolid	IconElement	IconElementSolid	IconEllipsis	IconEllipsisCircle
IconEllipsisCircleSolid	IconEllipsisVertical	IconEnglishComment	IconEnglishCommentSolid	IconEnvelope
IconEnvelopeOpen	IconEnvelopeOpenSolid	IconEnvelopeSolid	IconExcellentBookmark	IconExcellentBookmarkSolid
IconExclamationCircle	IconExclamationCircleSolid	IconExclamationTriangle	IconExclamationTriangleSolid	IconExpand
IconExpandAlt	IconExpandSquare	IconExpandSquareSolid	IconExternalLink	IconEye
IconEyeBright	IconEyeBrightSolid	IconEyeSlash	IconEyeSlashSolid	IconEyeTracking
IconEyeTrackingSolid	IconEyedropper	IconFeed	IconFeedSolid	IconFeedbackSolid
IconFile	IconFileAdd	IconFileAddSolid	IconFileEdit	IconFileEditSolid
IconFileError	IconFileErrorSolid	IconFileSolid	IconFilm	IconFilmSolid
IconFilter	IconFilterSolid	IconFireSolid	IconFitWidth	IconFlag
IconFlagSolid	IconFolder	IconFolderDownload	IconFolderDownloadSolid	IconFolderOpen
IconFolderOpenSolid	IconFolderSolid	IconFont	IconFontSize	IconFourDots
IconFourQuarterCircles	IconFourQuarterCirclesSolid	IconFrowningFace	IconFrowningFaceSolid	IconFullCircle
IconFullCircleSolid	IconFullscreen	IconFullscreenExit	IconGallery	IconGallerySolid
IconGamepad	IconGamepadSolid	IconGateway	IconGatewaySolid	IconGift
IconGiftSolid	IconGirl	IconGirlSolid	IconGradeCircle	IconGradeCircleSolid
IconHamburger	IconHeadphones	IconHeadphonesSolid	IconHeart	IconHeartCancel
IconHeartCancelSolid	IconHeartSolid	IconHierarchy	IconHierarchySolid	IconHighSquare
IconHighSquareSolid	IconHome	IconHomeSolid	IconHospital	IconHospitalSolid
IconHourglass	IconHourglassSolid	IconHouse	IconHouseSolid	IconIdCard
IconIdCardBack	IconIdCardBackSolid	IconIdCardSolid	IconImage	IconImageAdd
IconImageSolid	IconImport	IconIndent	IconInfoCircle	IconInfoCircleSolid
IconInfoflow	IconIntelligence	IconIntelligenceSolid	IconInvoice	IconInvoiceSolid
IconItalic	IconLandingPageSolid	IconLayer	IconLayerSolid	IconLayout
IconLayoutSolid	IconLetterSpacing	IconLineChart	IconLineChartAlt	IconLineChartAltSolid
IconLineChartSolid	IconLineHeight	IconLink	IconLinkAlt	IconLinkAltSolid
IconListChecked	IconListOrdered	IconListUnordered	IconLoading	IconLocation
IconLocationCopy	IconLocationCopySolid	IconLocationPin	IconLocationPinSolid	IconLocationSolid
IconLock	IconLockSolid	IconLongVideo	IconLongVideoSolid	IconLowSquare
IconLowSquareSolid	IconMagicWand	IconMagicWandSolid	IconMarket	IconMarketSolid
IconMediaAdd	IconMediumSquare	IconMediumSquareSolid	IconMigrate	IconMigrateSolid
IconMiniAppBaidu	IconMiniAppBaiduSolid	IconMiniAppWechat	IconMinimize	IconMinus
IconMinusCircle	IconMinusCircleSolid	IconMobileApp	IconMobileAppSolid	IconMotionGraphics
IconMove	IconMusic	IconMusicSolid	IconMute	IconMuteSolid
IconNeutralFace	IconNeutralFaceSolid	IconOneToOne	IconOneToOneSolid	IconOrder
IconOrderSolid	IconOutdent	IconOutstanding	IconOutstandingSolid	IconPaintBucket
IconPaintBucketSolid	IconPaperClip	IconPaperPlane	IconPaperPlaneSolid	IconPaste
IconPasteSolid	IconPath	IconPathSolid	IconPause	IconPauseCircle
IconPauseCircleSolid	IconPencil	IconPencilSolid	IconPhone	IconPhoneCall
IconPhoneCallSolid	IconPhoneEye	IconPhoneEyeSolid	IconPhoneSolid	IconPieChart
IconPieChartSolid	IconPlay	IconPlayCircle	IconPlayCircleSolid	IconPlus
IconPlusCircle	IconPlusCircleSolid	IconPlusSquare	IconPlusSquareSolid	IconPowerOff
IconPuzzlePiece	IconPuzzlePieceSolid	IconPvShield	IconPvShieldSolid	IconQrcode
IconQualityCircle	IconQualityCircleSolid	IconQuestionCircle	IconQuestionCircleSolid	IconQuestionComment
IconQuestionCommentSolid	IconRecommendSquare	IconRecommendSquareSolid	IconRecommendation	IconRedo
IconRedoSolid	IconReport	IconReportBookmark	IconReportBookmarkSolid	IconReportCheck
IconReportCheckSolid	IconReportSearch	IconReportSearchSolid	IconReportSettings	IconReportSettingsSolid
IconReportSolid	IconReportStamp	IconReportStampSolid	IconReportStar	IconReportStarSolid
IconReportTrendSettings	IconReportTrendSettingsSolid	IconReportUser	IconReportUserSolid	IconRoad
IconRocketSolid	IconRotateAnticlockwise	IconRotateAnticlockwiseSolid	IconRotateClockwise	IconRotateClockwiseSolid
IconSave	IconSaveSolid	IconScan	IconSearch	IconSearchDesktop
IconSearchDesktopSolid	IconSearchHistory	IconSearchHistorySolid	IconSearchSolid	IconSettings
IconSettingsSolid	IconShare	IconShareAlt	IconShareAltSolid	IconShieldCheck
IconShieldCheckSolid	IconShieldCnySolid	IconShieldEllipsisSolid	IconShieldTimesSolid	IconShieldUser
IconShieldUserSolid	IconShieldWaveSolid	IconShoppingBag	IconShoppingBagSolid	IconShoppingCart
IconShoppingCartSolid	IconShortVideo	IconShortVideoSolid	IconShrink	IconSignOut
IconSlidersSquare	IconSlidersSquareSolid	IconSmiley	IconSmileySolid	IconSmileyStar
IconSmileyStarSolid	IconSort	IconSortAlt	IconSortAsc	IconSortDesc
IconSoundWave	IconSquareRotation	IconSquareRotationSolid	IconStamp	IconStampSolid
IconStar	IconStarDash	IconStarDashSoild	IconStarHalf	IconStarSolid
IconStop	IconStopSolid	IconStrikethrough	IconSync	IconTag
IconTagSolid	IconTeam	IconTeamSolid	IconTelephone	IconTelephoneSolid
IconTemplate	IconTemplateSolid	IconTextSquare	IconTextSquareSolid	IconThumbDown
IconThumbDownSolid	IconThumbUp	IconThumbUpSolid	IconTimes	IconTimesCircle
IconTimesCircleSolid	IconToolbox	IconToolboxSolid	IconTrash	IconTrashSolid
IconTreasureChest	IconTreasureChestSolid	IconTrendDesktop	IconTrendDesktopSolid	IconTrendMonitor
IconTrendMonitorSolid	IconTrendPages	IconTrendPagesSolid	IconTrendReport	IconTrendReportSolid
IconTrophy	IconTrophySolid	IconTruck	IconTruckSolid	IconTv
IconTvSolid	IconTwoHearts	IconTwoHeartsSolid	IconUnderline	IconUndo
IconUndoSolid	IconUnlink	IconUnlock	IconUnlockSolid	IconUpdateWave
IconUpgrade	IconUpgradeSolid	IconUpload	IconUploadDesktop	IconUploadDesktopSolid
IconUser	IconUserBookmark	IconUserBookmarkSolid	IconUserCard	IconUserCardSolid
IconUserCircle	IconUserCircleSolid	IconUserCombined	IconUserCombinedSolid	IconUserFilter
IconUserFilterSolid	IconUserIntersection	IconUserIntersectionSolid	IconUserLabel	IconUserLabelSolid
IconUserMobile	IconUserMobileSolid	IconUserSearch	IconUserSearchSolid	IconUserSettings
IconUserSettingsSolid	IconUserSolid	IconUserSync	IconUserSyncSolid	IconUserTieba
IconVideo	IconVideoAdd	IconVideoCrop	IconVideoCropSolid	IconVideoFilm
IconVideoFilmSolid	IconVideoHistory	IconVideoHistorySolid	IconVideoSolid	IconVolume
IconVolumeSolid	IconWhirlpool	IconWhirlpoolSolid	IconYingxiaotong	IconYingxiaotongSolid
IconZoomIn	IconZoomInSolid	IconZoomOut	IconZoomOutSolid