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
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	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