介绍

sard 通过 @sard/icons 包提供少量的、内部组件会使用到的 svg 图标，可按需使用，支持树摇。

在实际项目中通常需要使用自己的图标库，sard 对你使用到图标没有任何要求，也不会提供任何范式。

安装

npm

npm install @sard/icons

pnpm

pnpm add @sard/icons

yarn

yarn add @sard/icons

代码演示

基础使用

vue ts

<template>
  <Search />
</template>

<script setup lang="ts">
import { Search } from '@sard/icons'
</script>

vue js

<template>
  <Search />
</template>

<script setup lang="js">
import { Search } from '@sard/icons'
</script>

尺寸

vue ts

<template>
  <Search class="text-4xl" />
</template>

<script setup lang="ts">
import { Search } from '@sard/icons'
</script>

vue js

<template>
  <Search class="text-4xl" />
</template>

<script setup lang="js">
import { Search } from '@sard/icons'
</script>

颜色

vue ts

<template>
  <Search class="text-amber-600 text-4xl" />
</template>

<script setup lang="ts">
import { Search } from '@sard/icons'
</script>

vue js

<template>
  <Search class="text-amber-600 text-4xl" />
</template>

<script setup lang="js">
import { Search } from '@sard/icons'
</script>

图标集合

右边展示了 @sard/icons 包提供的所有图标。

点击右边演示的图标可以复制图标名称。

vue ts

<template>
  <s-grid :columns="3" bordered clickable>
    <s-grid-item v-for="(comp, key) in icons" :key="key" :text="key" @click="onClick(key)" #icon>
      <component :is="comp"></component>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { clipboard, toast } from 'sard'
import * as icons from '@sard/icons'

const onClick = (name: string) => {
  clipboard.write(`<${name} />`).then(() => {
    toast.success('复制成功')
  })
}
</script>

vue js

<template>
  <s-grid :columns="3" bordered clickable>
    <s-grid-item v-for="(comp, key) in icons" :key="key" :text="key" @click="onClick(key)" #icon>
      <component :is="comp"></component>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { clipboard, toast } from 'sard'
import * as icons from '@sard/icons'
const onClick = (name) => {
  clipboard.write(`<${name} />`).then(() => {
    toast.success('复制成功')
  })
}
</script>