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

IconQACommentSolid	IconAbTest	IconAbTestSolid	IconAbstract	IconAbstractSolid
IconAcademicCap	IconAcademicCapSolid	IconAdDeliveryCircleSolid	IconAddPauseSquare	IconAdjust
IconAfterSquare	IconAfterSquareSolid	IconAi	IconAiBubble	IconAiBubbleSolid
IconAiText	IconAlignBottom	IconAlignCenter	IconAlignLeft	IconAlignRight
IconAlignTop	IconAndroid	IconAnticlockwise	IconAppStore	IconApps
IconAppsSettings	IconAppsSettingsSolid	IconAppsSolid	IconArrowCurveDownRightSolid	IconArrowCurveUpRightSolid
IconArrowDown	IconArrowDownLeft	IconArrowDownRight	IconArrowDownSolid	IconArrowLeft
IconArrowLeftSolid	IconArrowRight	IconArrowRightSolid	IconArrowToBottom	IconArrowToTop
IconArrowToTopSoild	IconArrowToTopSolid	IconArrowUUpLeft	IconArrowUUpRight	IconArrowUp
IconArrowUpSolid	IconAsterisk	IconAttribute	IconAttributeSolid	IconAudio
IconAudioSolid	IconBabyBottle	IconBabyBottleSolid	IconBackground	IconBackgroundSolid
IconBackgroundSwitchSolid	IconBarChart	IconBarChartAlt	IconBarChartAltSolid	IconBarChartSolid
IconBarChartSquare	IconBarChartSquareSolid	IconBeforeSquare	IconBeforeSquareSolid	IconBell
IconBellSolid	IconBold	IconBook	IconBookBookmark	IconBookBookmarkCheckSolid
IconBookBookmarkSolid	IconBookOpen	IconBookSolid	IconBookmark	IconBookmarkSolid
IconBooksBookmark	IconBooksBookmarkSolid	IconBox	IconBoxSolid	IconBrush
IconBuilding	IconBuildingSolid	IconBulb	IconBulbDash	IconBulbDashSolid
IconBulbSolid	IconBulbTrendSolid	IconBullseye	IconBullseyeHit	IconBullseyeHitSolid
IconCalendar	IconCalendarCny	IconCalendarCnySolid	IconCalendarHeart	IconCalendarHeartSolid
IconCalendarSolid	IconCamera	IconCameraAdd	IconCameraAddSolid	IconCameraSolid
IconCar	IconCarSolid	IconCardSolid	IconCaretDown	IconCaretLeft
IconCaretRight	IconCaretUp	IconCaretsOpposite	IconCellphone	IconCellphoneSolid
IconChartStarSolid	IconChat	IconChatSolid	IconCheck	IconCheckCircle
IconCheckCircleSolid	IconCheckDesktop	IconCheckDesktopSolid	IconCheckSquare	IconCheckSquareSolid
IconChevronDoubleDown	IconChevronDoubleLeft	IconChevronDoubleRight	IconChevronDoubleUp	IconChevronDown
IconChevronLeft	IconChevronLeftCircle	IconChevronLeftCircleSolid	IconChevronRight	IconChevronRightCircle
IconChevronRightCircleSolid	IconChevronUp	IconCircleExtend	IconCircleExtendSolid	IconCircleRotation
IconCircleRotationSolid	IconClock	IconClockSolid	IconClockwise	IconCloudUploadSolid
IconCnyCircle	IconCnyCircleSolid	IconCnyRefund	IconCnyWallet	IconCnyWalletSolid
IconCoin	IconCoinDiamond	IconCoinDiamondSolid	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	IconDecreaseWidth
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	IconEyeSolid	IconEyeTracking	IconEyeTrackingSolid
IconEyedropper	IconFastForward	IconFastRewind	IconFeed	IconFeedSolid
IconFeedbackSolid	IconFile	IconFileAdd	IconFileAddSolid	IconFileAlt
IconFileEdit	IconFileEditSolid	IconFileError	IconFileErrorSolid	IconFileShareSolid
IconFileSolid	IconFileStar	IconFileStarSolid	IconFilm	IconFilmSolid
IconFilter	IconFilterSolid	IconFireSolid	IconFitWidth	IconFlag
IconFlagSolid	IconFolder	IconFolderDownload	IconFolderDownloadSolid	IconFolderOpen
IconFolderOpenSolid	IconFolderSolid	IconFolderStar	IconFolderStarSolid	IconFolderTimeSolid
IconFont	IconFontSize	IconFourDots	IconFourQuarterCircles	IconFourQuarterCirclesSolid
IconFrowningFace	IconFrowningFaceSolid	IconFullCircle	IconFullCircleSolid	IconFullscreen
IconFullscreenExit	IconGallery	IconGallerySolid	IconGamepad	IconGamepadSolid
IconGateway	IconGatewaySolid	IconGift	IconGiftSolid	IconGirl
IconGirlSolid	IconGradeCircle	IconGradeCircleSolid	IconHamburger	IconHammerSolid
IconHeadphones	IconHeadphonesSolid	IconHeart	IconHeartCancel	IconHeartCancelSolid
IconHeartHandshakeSolid	IconHeartSolid	IconHeteronymSquare	IconHexagonSolid	IconHierarchy
IconHierarchySolid	IconHighSquare	IconHighSquareSolid	IconHome	IconHomeAlt
IconHomeAltSolid	IconHomeSolid	IconHospital	IconHospitalSolid	IconHourglass
IconHourglassSolid	IconHouse	IconHouseSolid	IconIdCard	IconIdCardBack
IconIdCardBackSolid	IconIdCardSolid	IconIdCircle	IconIdSquare	IconImage
IconImageAdd	IconImageDesktopSolid	IconImageSolid	IconImageStar	IconImageStarSolid
IconImageUpload	IconImport	IconIndent	IconInfoCircle	IconInfoCircleSolid
IconInfoflow	IconIntelligence	IconIntelligenceSolid	IconIntelligentPrompt	IconInvoice
IconInvoiceSolid	IconItalic	IconKeyCommand	IconKeyDelete	IconKeyShift
IconKeyboard	IconLandingPageSolid	IconLayer	IconLayerSolid	IconLayout
IconLayoutSolid	IconLetterSpacing	IconLightning	IconLightningSolid	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
IconMagnet	IconMagnetSolid	IconMarket	IconMarketSolid	IconMediaAdd
IconMedicalKit	IconMedicalKitSolid	IconMediumSquare	IconMediumSquareSolid	IconMenu
IconMigrate	IconMigrateSolid	IconMiniAppBaidu	IconMiniAppBaiduSolid	IconMiniAppWechat
IconMinimize	IconMinus	IconMinusCircle	IconMinusCircleSolid	IconMobileApp
IconMobileAppSolid	IconMotionGraphics	IconMove	IconMovieSolid	IconMusic
IconMusicSolid	IconMute	IconMuteSolid	IconNeutralFace	IconNeutralFaceSolid
IconOneToOne	IconOneToOneSolid	IconOrder	IconOrderSolid	IconOutdent
IconOutstanding	IconOutstandingSolid	IconPackageUpload	IconPackageUploadSolid	IconPaintBucket
IconPaintBucketSolid	IconPaperClip	IconPaperPlane	IconPaperPlaneSend	IconPaperPlaneSendSolid
IconPaperPlaneSolid	IconPaste	IconPasteImageSolid	IconPasteSolid	IconPath
IconPathSolid	IconPause	IconPauseCircle	IconPauseCircleSolid	IconPenWrite
IconPenWriteSolid	IconPencil	IconPencilSolid	IconPhone	IconPhoneCall
IconPhoneCallSolid	IconPhoneEye	IconPhoneEyeSolid	IconPhoneSolid	IconPieChart
IconPieChartSolid	IconPinSlant	IconPinSolid	IconPlay	IconPlayCircle
IconPlayCircleSolid	IconPlus	IconPlusCircle	IconPlusCircleSolid	IconPlusSquare
IconPlusSquareSolid	IconPowerOff	IconPrinterSolid	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
IconReportTrendSwitchSolid	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	IconShieldStarSolid	IconShieldTimesSolid	IconShieldUser
IconShieldUserSolid	IconShieldWave	IconShieldWaveSolid	IconShoppingBag	IconShoppingBagSolid
IconShoppingCart	IconShoppingCartSolid	IconShortVideo	IconShortVideoSolid	IconShrink
IconSignOut	IconSkipBackward	IconSkipForward	IconSlidersSquare	IconSlidersSquareSolid
IconSlideshowTrend	IconSmiley	IconSmileyComment	IconSmileySolid	IconSmileyStar
IconSmileyStarSolid	IconSort	IconSortAlt	IconSortAsc	IconSortDesc
IconSoundWave	IconSparklesSolid	IconSplit	IconSquareRotation	IconSquareRotationSolid
IconStamp	IconStampSolid	IconStar	IconStarDash	IconStarDashSoild
IconStarDashSolid	IconStarHalf	IconStarSolid	IconStop	IconStopSolid
IconStrikethrough	IconSwitch	IconSync	IconSyncCircle	IconSyringe
IconSyringesSolid	IconTag	IconTagSolid	IconTaskListSolid	IconTeam
IconTeamSolid	IconTelephone	IconTelephoneSolid	IconTemplate	IconTemplateSolid
IconTextFlowerSquare	IconTextFlowerSquareSolid	IconTextSquare	IconTextSquareAltSolid	IconTextSquareSolid
IconThumbDown	IconThumbDownSolid	IconThumbUp	IconThumbUpSolid	IconTimes
IconTimesCircle	IconTimesCircleSolid	IconToolbox	IconToolboxSolid	IconToolsSolid
IconTrackCut	IconTrackFrameLast	IconTrash	IconTrashSolid	IconTravelEarthPlaneSolid
IconTreasureChest	IconTreasureChestSolid	IconTrendDesktop	IconTrendDesktopSolid	IconTrendMonitor
IconTrendMonitorSolid	IconTrendPages	IconTrendPagesSolid	IconTrendReport	IconTrendReportSolid
IconTrendStarSolid	IconTrimLeft	IconTrimRight	IconTrophy	IconTrophySolid
IconTruck	IconTruckSolid	IconTv	IconTvSolid	IconTwoHearts
IconTwoHeartsSolid	IconUnderline	IconUndo	IconUndoSolid	IconUnlink
IconUnlock	IconUnlockSolid	IconUpdateWave	IconUpgrade	IconUpgradeSolid
IconUpload	IconUploadDesktop	IconUploadDesktopSolid	IconUser	IconUserAuthorization
IconUserBookmark	IconUserBookmarkSolid	IconUserCard	IconUserCardSolid	IconUserCircle
IconUserCircleSolid	IconUserCombined	IconUserCombinedSolid	IconUserFilter	IconUserFilterSolid
IconUserIntersection	IconUserIntersectionSolid	IconUserLabel	IconUserLabelSolid	IconUserMobile
IconUserMobileSolid	IconUserSearch	IconUserSearchSolid	IconUserSettings	IconUserSettingsSolid
IconUserSolid	IconUserStar	IconUserSync	IconUserSyncSolid	IconUserTieba
IconVideo	IconVideoAdd	IconVideoAlt	IconVideoCrop	IconVideoCropSolid
IconVideoFilm	IconVideoFilmSolid	IconVideoFrameFirst	IconVideoHistory	IconVideoHistorySolid
IconVideoSolid	IconVideoUpload	IconVolume	IconVolumeSolid	IconWhirlpool
IconWhirlpoolSolid	IconWindmillSpinning	IconWoman	IconYaoSquare	IconYingxiaotong
IconYingxiaotongSolid	IconZoomIn	IconZoomInSolid	IconZoomOut	IconZoomOutSolid