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

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