Dls-icons-vue-3 NPM

dls-icons-vue-3

npm.io

安装

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)