dls-icons-vue

dls-icons-vue

安装

npm i -D dls-icons-vue

使用

作为 Vue 组件

Demo →

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

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

export default {
  components: {
    IconArrowRight
  }
}
</script>

Prop

spin: boolean

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

active: boolean

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

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

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

export default {
  components: {
    SharedResources
  }
}
</script>

<template>
  <div id="app">
    <shared-resources />
    ...
  </div>
</template>

作为图标数据

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

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

Available Icons