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
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	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	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
IconHammerSolid	IconHeadphones	IconHeadphonesSolid	IconHeart	IconHeartCancel
IconHeartCancelSolid	IconHeartHandshakeSolid	IconHeartSolid	IconHeteronymSquare	IconHexagonSolid
IconHierarchy	IconHierarchySolid	IconHighSquare	IconHighSquareSolid	IconHome
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
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	IconShieldWave
IconShieldWaveSolid	IconShoppingBag	IconShoppingBagSolid	IconShoppingCart	IconShoppingCartSolid
IconShortVideo	IconShortVideoSolid	IconShrink	IconSignOut	IconSkipBackward
IconSkipForward	IconSlidersSquare	IconSlidersSquareSolid	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
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
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	IconVideoCrop	IconVideoCropSolid	IconVideoFilm
IconVideoFilmSolid	IconVideoFrameFirst	IconVideoHistory	IconVideoHistorySolid	IconVideoSolid
IconVideoUpload	IconVolume	IconVolumeSolid	IconWhirlpool	IconWhirlpoolSolid
IconWoman	IconYaoSquare	IconYingxiaotong	IconYingxiaotongSolid	IconZoomIn
IconZoomInSolid	IconZoomOut	IconZoomOutSolid