# dls-icons-vue-3 ![](https://img.shields.io/npm/v/dls-icons-vue.svg) ## Installation ```shell npm i -D dls-icons-vue-3 ``` ## Usage ### As Vue component [Demo →](https://stackblitz.com/edit/dls-icons-vue-3-demo?file=src%2FApp.vue) ```vue ``` #### 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. > > ```vue > > > > ``` ### As icon data ```js import { dataArrowRight } from 'dls-icons-vue-3' /* { { name: 'icon-arrow-right', content: '

_{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}	_IconEqual	_{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}

Hello Icons