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