Icon 图标

常用的图标集合。

基础用法

悬停在下拉菜单上以展开更多操作。

<script setup>
import PfIcon from '@/components/lib/Icon/src/Icon.vue'
</script>
<template>
  <div class="mb-4">
    <pf-icon icon="arrow-up" />
    <pf-icon icon="pen-to-square" size="xl" />
    <pf-icon icon="share-nodes" type="primary" />
    <pf-icon icon="trash-can" color="#0e7a0d" />
    <pf-icon icon="magnifying-glass" size="xl" type="success" rotation="90" />
    <pf-icon
      icon="arrow-up-from-bracket"
      size="2x"
      type="danger"
      title="Upload"
    />
    <pf-icon icon="fa-spinner" spin />
  </div>
</template>
<style scoped>
.pf-icon {
  margin-right: 15px;
}
</style>

Icon 属性

Name	Description	Type	Default
icon	图标	object | Array<string> | string | IconDefinition	''
type	图标类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	-
color	图标颜色	^[string]	''
spin	自旋	^[boolean]	false
fixedWidth	固定宽度	^[boolean]	false
listItem	列表项	^[boolean]	false
swapOpacity	交换不透明度	^[boolean]	false
flip	翻转	'horizontal' | 'vertical' | 'both'	-
rotation	旋转	rotation?: 90 | 180 | 270 | '90' | '180' | '270'	-
transform	动画	^[object]	-

图标集合

在线网站