@ astraicons/ veue (英语)
Astra 图标集的美丽Vue 3图标. 跨越5个风格的900+图标.
安装
npm install @astraicons/vue
# or
yarn add @astraicons/vue
# or
pnpm add @astraicons/vue
使用量
从各自的样式目录中导入图标 :
<template>
<div>
<HomeIcon class="w-6 h-6" />
<HeartIcon class="w-6 h-6 text-red-500" />
<StarIcon class="w-6 h-6 text-yellow-500" />
<AppleIcon class="w-8 h-8" />
<CubeIcon class="w-8 h-8 text-purple-500" />
</div>
</template>
<script setup>
import { HomeIcon } from '@astraicons/vue/linear';
import { HeartIcon } from '@astraicons/vue/bold';
import { StarIcon } from '@astraicons/vue/duotone';
import { AppleIcon } from '@astraicons/vue/brand';
import { CubeIcon } from '@astraicons/vue/3d';
</script>
图标样式
线性 (288个图标)
带有1.5px中风宽度的大纲图标。 适合现代的,最小化的界面.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/linear';
粗体 (288 个图标)
填充或粗体的中风图标,用于强调并更能见度更小的尺寸.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/bold';
Duotone (288个图标)
将填充和外观风格相结合的双通图标,用于深度和视觉兴趣.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/duotone';
品牌( 18个图标)
包括社交媒体平台和受欢迎品牌在内的公司与服务标志.
import { AppleIcon, GoogleIcon, TwitterIcon } from '@astraicons/vue/brand';
三维 (32个图标)
当代界面有深度和视角的现代三维风格图标.
import { CubeIcon, FolderIcon, BoxIcon } from '@astraicons/vue/3d';
道具
所有图标都是接受标准 HTML 属性的功能组件:
<template>
<HomeIcon
class="custom-class"
:style="{ color: 'blue' }"
@click="handleClick"
role="img"
aria-label="Home"
/>
</template>
实例
有尾风CSS
<template>
<HomeIcon class="w-8 h-8 text-blue-500 hover:text-blue-600 transition-colors" />
</template>
带有内线样式
<template>
<HomeIcon :style="{ width: '32px', height: '32px', color: '#3B82F6' }" />
</template>
在按钮中
<template>
<button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
<SaveIcon class="w-5 h-5" />
Save Changes
</button>
</template>
<script setup>
import { SaveIcon } from '@astraicons/vue/linear';
</script>
Vue 3 组成 API
<template>
<component :is="currentIcon" class="w-6 h-6" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { HomeIcon, SettingsIcon } from '@astraicons/vue/linear';
const isHome = ref(true);
const currentIcon = computed(() => isHome.value ? HomeIcon : SettingsIcon);
</script>
类型脚本支持
所有图标全部打入. TypeScript将为所有可用的图标提供自动完成.
<script setup lang="ts">
import { HomeIcon } from '@astraicons/vue/linear';
import type { FunctionalComponent } from 'vue';
const MyIcon: FunctionalComponent = HomeIcon;
</script>
树摇
此包被优化为树摇. 只有您导入的图标才会包含在您的捆绑中 .
// ✅ Good - only imports what you need
import { HomeIcon } from '@astraicons/vue/linear';
// ❌ Avoid - imports entire style directory
import * as Icons from '@astraicons/vue/linear';
软件包信息
- 软件包大小:~14MB 共计(未包装)
- 文件: 3,524个文件(JS + TypeScript定义)
- 树能震动: 是 - 只有导入的图标被捆绑
- 同伴依赖关系页:1
可用图标
查看完整图标列表 :
浏览器支持
- 颜色( 最新)
- 火狐( 最新)
- 萨法里(最新)
- 边缘( 最新)
捐款
我们欢迎为加强该项目而作的贡献。 我们目前的重点是:
- QQ 已有图标的错误修正
- QQ 类型脚本改进
- 文件更新
- QQ 新的图标贡献( 目前尚未接受)
相关软件包
- @ astraicons/ 反应 - 反应组件
- 星盘 - SVG 图标文件
贷项
- 图标设计由 UI 阿斯特拉语Name
- 以 赫罗伊孔斯
许可证
麻省理工学院 UI 阿斯特拉语Name