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	IconPage
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
IconPlusSolid	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	IconTextShengSquare
IconTextShengSquareSolid	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	IconUserStarSolid	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