dls-icons-vue-3

Installation

npm i -D dls-icons-vue-3

Usage

As Vue component

Demo →

<script setup>
import { IconArrowRight } from 'dls-icons-vue-3'
</script>

<template>
<div class="title">
  <h1>
    Hello Icons
    <icon-arrow-right style="{ color: '#999', marginLeft: '5px' }" />
  </h1>
</div>
</template>

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.

<script setup>
import { SharedResources } from 'dls-icons-vue-3'
</script>

<template>
  <SharedResources />
  <div id="app">...</div>
</template>

As icon data

import { dataArrowRight } from 'dls-icons-vue-3'

/*
{
  {
    name: 'icon-arrow-right',
    content: '<path d="..." ...',
    width: 24,
    height: 24
  }
}
*/
console.log(dataArrowRight)

Available Icons

IconAbTest	IconAbTestSolid	IconAbstract	IconAbstractSolid	IconAcademicCap
IconAcademicCapSolid	IconAdDeliveryCircleSolid	IconAddPauseSquare	IconAfterSquare	IconAfterSquareSolid
IconAi	IconAlignBottom	IconAlignCenter	IconAlignLeft	IconAlignRight
IconAlignTop	IconAndroid	IconAnticlockwise	IconAppStore	IconApps
IconAppsSettings	IconAppsSettingsSolid	IconAppsSolid	IconArrowCurveDownRightSolid	IconArrowCurveUpRightSolid
IconArrowDown	IconArrowDownLeft	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	IconBookBookmarkSolid	IconBookOpen
IconBookSolid	IconBookmark	IconBookmarkSolid	IconBooksBookmark	IconBooksBookmarkSolid
IconBox	IconBoxSolid	IconBuilding	IconBuildingSolid	IconBulb
IconBulbDash	IconBulbDashSolid	IconBulbSolid	IconBullseye	IconBullseyeHit
IconBullseyeHitSolid	IconCalendar	IconCalendarCny	IconCalendarCnySolid	IconCalendarHeart
IconCalendarHeartSolid	IconCalendarSolid	IconCamera	IconCameraAdd	IconCameraAddSolid
IconCameraSolid	IconCar	IconCarSolid	IconCaretDown	IconCaretLeft
IconCaretRight	IconCaretUp	IconCaretsOpposite	IconCellphone	IconCellphoneSolid
IconChat	IconChatSolid	IconCheck	IconCheckCircle	IconCheckCircleSolid
IconCheckDesktop	IconCheckDesktopSolid	IconCheckSquare	IconCheckSquareSolid	IconChevronDoubleDown
IconChevronDoubleLeft	IconChevronDoubleRight	IconChevronDoubleUp	IconChevronDown	IconChevronLeft
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	IconHierarchy	IconHierarchySolid
IconHighSquare	IconHighSquareSolid	IconHome	IconHomeAltSolid	IconHomeSolid
IconHospital	IconHospitalSolid	IconHourglass	IconHourglassSolid	IconHouse
IconHouseSolid	IconIdCard	IconIdCardBack	IconIdCardBackSolid	IconIdCardSolid
IconIdCircle	IconImage	IconImageAdd	IconImageDesktopSolid	IconImageSolid
IconImageStarSolid	IconImageUpload	IconImport	IconIndent	IconInfoCircle
IconInfoCircleSolid	IconInfoflow	IconIntelligence	IconIntelligenceSolid	IconIntelligentPrompt
IconInvoice	IconInvoiceSolid	IconItalic	IconKeyCommand	IconKeyDelete
IconKeyShift	IconKeyboard	IconLandingPageSolid	IconLayer	IconLayerSolid
IconLayout	IconLayoutSolid	IconLetterSpacing	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	IconMediumSquare
IconMediumSquareSolid	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	IconPaperPlaneSolid
IconPaste	IconPasteImageSolid	IconPasteSolid	IconPath	IconPathSolid
IconPause	IconPauseCircle	IconPauseCircleSolid	IconPenWrite	IconPenWriteSolid
IconPencil	IconPencilSolid	IconPhone	IconPhoneCall	IconPhoneCallSolid
IconPhoneEye	IconPhoneEyeSolid	IconPhoneSolid	IconPieChart	IconPieChartSolid
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	IconShieldWaveSolid	IconShoppingBag	IconShoppingBagSolid	IconShoppingCart
IconShoppingCartSolid	IconShortVideo	IconShortVideoSolid	IconShrink	IconSignOut
IconSkipBackward	IconSkipForward	IconSlidersSquare	IconSlidersSquareSolid	IconSmiley
IconSmileyComment	IconSmileySolid	IconSmileyStar	IconSmileyStarSolid	IconSort
IconSortAlt	IconSortAsc	IconSortDesc	IconSoundWave	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
IconVolume	IconVolumeSolid	IconWhirlpool	IconWhirlpoolSolid	IconYaoSquare
IconYingxiaotong	IconYingxiaotongSolid	IconZoomIn	IconZoomInSolid	IconZoomOut
IconZoomOutSolid