dls-icons-vue-3

dls-icons-vue-3

安装

npm i -D dls-icons-vue-3

使用

作为 Vue 组件

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

图标是否旋转。默认值为 false。可以使用 --dls-icon-spin-duration 自定义旋转一圈所需的时间。默认值为 1s。

active: boolean

图标是否处于激活状态。默认值为 undefined。如果 active 为 undefined，图标将处于默认状态。否则，根据 active 的值，它将处于激活或非激活状态。

Note 要让 active prop 正常工作，您应该在根组件中渲染一个 SharedResources 组件。例如：

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

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

作为图标数据

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

/*
{
  {
    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	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