@ frontiers/ icons (英语)
203 专业设计的图标作为Vue 3组件和SVG文件用于前沿设计系统.
特征
- 🎨 203 个图标 - 完整的设计系统覆盖
- ⚡ Vue 3 组件 - 准备使用,支持类型脚本
- 📦 树能震动 - 只导入你需要的东西
- 🎯 可自定义 - 动态大小和颜色通过
currentColor - 📁 原始 SVGs 软件 - 在任何框架内使用
安装
npm install @frontiers/icons
# or
pnpm add @frontiers/icons
快速启动
<script setup>
import { ChevronRightIcon, UserFillIcon, AlertIcon } from "@frontiers/icons"
</script>
<template>
<ChevronRightIcon :size="24" />
<UserFillIcon :size="32" class="text-blue-500" />
<AlertIcon />
</template>
使用量
导入组件
<script setup>
// Import from root (recommended)
import { ChevronRightIcon, AlertIcon } from "@frontiers/icons"
// Or from components
import { ChevronRightIcon } from "@frontiers/icons/components"
</script>
导入 SVG 文件
import chevronRight from "@frontiers/icons/svg/chevron-right.svg"
道具
所有 Vue 组件接受:
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
size | Number | String | 24 | Px 图标大小 |
加所有标准 SVG 属性通过 v-bind="$attrs"。 。 。 .
样式
图标使用 currentColor 以容易为主题:
<template>
<!-- Inherits text color -->
<div class="text-blue-500">
<ChevronRightIcon />
</div>
<!-- With Tailwind -->
<AlertIcon class="w-6 h-6 text-red-500" />
<!-- Custom size -->
<UserFillIcon :size="32" style="color: #007bff;" />
</template>
实例
带有图标的按钮
<template>
<button class="btn">
<span>Next</span>
<ChevronRightIcon :size="20" />
</button>
</template>
装入状态
<script setup>
import { SpinnerIcon } from "@frontiers/icons"
const loading = ref(false)
</script>
<template>
<button :disabled="loading">
<SpinnerIcon v-if="loading" class="animate-spin" :size="20" />
<span v-else>Submit</span>
</button>
</template>
动态图标
<script setup>
import { computed } from "vue"
import * as Icons from "@frontiers/icons"
const props = defineProps({ icon: String, size: Number })
const IconComponent = computed(() => Icons[props.icon])
</script>
<template>
<component :is="IconComponent" :size="size" />
</template>
<!-- Usage: pass icon names like "ChevronRightIcon", "UserFillIcon", etc. -->
导航菜单
<script setup>
import { HomeIcon, UserIcon, SettingsIcon } from "@frontiers/icons"
</script>
<template>
<nav>
<router-link to="/"><HomeIcon :size="20" /> Home</router-link>
<router-link to="/profile"><UserIcon :size="20" /> Profile</router-link>
<router-link to="/settings"
><SettingsIcon :size="20" /> Settings</router-link
>
</nav>
</template>
可用图标( 203)
查看 演示.html 文件或按类别探索图标.
导航(32)
ArrowDownIcon, (中文(简体) ), ArrowDownCircledIcon, (中文(简体) ), ArrowDownCircledFillIcon, (中文(简体) ), ArrowDownLeftIcon, (中文(简体) ), ArrowDownRightIcon, (中文(简体) ), ArrowLeftIcon, (中文(简体) ), ArrowLeftAndRightIcon, (中文(简体) ), ArrowLeftCircledIcon, (中文(简体) ), ArrowLeftCircledFillIcon, (中文(简体) ), ArrowRightIcon, (中文(简体) ), ArrowRightCircledIcon, (中文(简体) ), ArrowRightCircledFillIcon, (中文(简体) ), ArrowUpIcon, (中文(简体) ), ArrowUpAndDownIcon, (中文(简体) ), ArrowUpCircledIcon, (中文(简体) ), ArrowUpCircledFillIcon, (中文(简体) ), ArrowUpLeftIcon, (中文(简体) ), ArrowUpRightIcon, (中文(简体) ), ChevronDownIcon, (中文(简体) ), ChevronDownCircledIcon, (中文(简体) ), ChevronDownCircledFillIcon, (中文(简体) ), ChevronLeftIcon, (中文(简体) ), ChevronLeftCircledIcon, (中文(简体) ), ChevronLeftCircledFillIcon, (中文(简体) ), ChevronRightIcon, (中文(简体) ), ChevronRightCircledIcon, (中文(简体) ), ChevronRightCircledFillIcon, (中文(简体) ), ChevronUpIcon, (中文(简体) ), ChevronUpCircledIcon, (中文(简体) ), ChevronUpCircledFillIcon, (中文(简体) ), FirstPageIcon, (中文(简体) ), LastPageIcon
UI 元素 (21)
BurgerIcon, (中文(简体) ), CheckIcon, (中文(简体) ), CheckmarkIcon, (中文(简体) ), CheckmarkFillIcon, (中文(简体) ), CloseIcon, (中文(简体) ), CloseCircledIcon, (中文(简体) ), CloseCircledFillIcon, (中文(简体) ), DragIcon, (中文(简体) ), FilterIcon, (中文(简体) ), FilterFillIcon, (中文(简体) ), HomeIcon, (中文(简体) ), HomeFillIcon, (中文(简体) ), LessIcon, (中文(简体) ), MagnifyingGlassIcon, (中文(简体) ), MoreCircledIcon, (中文(简体) ), MoreCircledFillIcon, (中文(简体) ), MoreOptionsHorizontalIcon, (中文(简体) ), MoreOptionsVerticalIcon, (中文(简体) ), SpinnerIcon, (中文(简体) ), UserIcon, (中文(简体) ), UserFillIcon
行动(23)
AttachmentIcon, (中文(简体) ), CopyIcon, (中文(简体) ), DeleteIcon, (中文(简体) ), DeleteFillIcon, (中文(简体) ), DownloadIcon, (中文(简体) ), EditIcon, (中文(简体) ), ForwardIcon, (中文(简体) ), FullscreenIcon, (中文(简体) ), LinkIcon, (中文(简体) ), LinkedinIcon, (中文(简体) ), NoFullscreenIcon, (中文(简体) ), OpenInNewIcon, (中文(简体) ), OpenInNewFillIcon, (中文(简体) ), ReloadIcon, (中文(简体) ), ReplyIcon, (中文(简体) ), ReplyAllIcon, (中文(简体) ), SaveIcon, (中文(简体) ), SaveFillIcon, (中文(简体) ), SendIcon, (中文(简体) ), SendFillIcon, (中文(简体) ), ShareIcon, (中文(简体) ), ShareFillIcon, (中文(简体) ), StopIcon
状态和反馈(23)
AlertIcon, (中文(简体) ), AlertFillIcon, (中文(简体) ), ClockIcon, (中文(简体) ), ClockFillIcon, (中文(简体) ), FeedbackErrorBlackIcon, (中文(简体) ), FeedbackErrorWhiteIcon, (中文(简体) ), FeedbackInfoBlackIcon, (中文(简体) ), FeedbackInfoWhiteIcon, (中文(简体) ), FeedbackSuccessBlackIcon, (中文(简体) ), FeedbackSuccessWhiteIcon, (中文(简体) ), FeedbackWarningBlackIcon, (中文(简体) ), FeedbackWarningWhiteIcon, (中文(简体) ), HelpIcon, (中文(简体) ), HelpFillIcon, (中文(简体) ), HelpNoCircledIcon, (中文(简体) ), HideIcon, (中文(简体) ), HideFillIcon, (中文(简体) ), InfoIcon, (中文(简体) ), InfoFillIcon, (中文(简体) ), NotificationIcon, (中文(简体) ), NotificationFillIcon, (中文(简体) ), ViewIcon, (中文(简体) ), ViewFillIcon
内容类型(15)
ArticleIcon, (中文(简体) ), ArticleFillIcon, (中文(简体) ), ArticleNewIcon, (中文(简体) ), ContentHubIcon, (中文(简体) ), EBookIcon, (中文(简体) ), EBookFillIcon, (中文(简体) ), NewsletterIcon, (中文(简体) ), NewsletterFillIcon, (中文(简体) ), PaperIcon, (中文(简体) ), PaperFillIcon, (中文(简体) ), ProductHubIcon, (中文(简体) ), PublicIcon, (中文(简体) ), PublicFillIcon, (中文(简体) ), ResearchTopicsIcon, (中文(简体) ), ResearchTopicsFillIcon
社会媒体(8)
BlueskyIcon, (中文(简体) ), FacebookIcon, (中文(简体) ), InstagramIcon, (中文(简体) ), LinkedinIcon, (中文(简体) ), OrcidIcon, (中文(简体) ), OrcidFillIcon, (中文(简体) ), TikTokIcon, (中文(简体) ), XTwitterIcon, (中文(简体) ), YoutubeIcon
组织(12个)
CalendarIcon, (中文(简体) ), CalendarFillIcon, (中文(简体) ), FilesIcon, (中文(简体) ), FilesFillIcon, (中文(简体) ), GroupIcon, (中文(简体) ), GroupFillIcon, (中文(简体) ), ListIcon, (中文(简体) ), ListNumberIcon, (中文(简体) ), NumberedListIcon, (中文(简体) ), SortIcon, (中文(简体) ), SortAscendingIcon, (中文(简体) ), SortDescendingIcon
互动(12)
BookmarkIcon, (中文(简体) ), BookmarkFillIcon, (中文(简体) ), ChatIcon, (中文(简体) ), ChatFillIcon, (中文(简体) ), FavoriteIcon, (中文(简体) ), FavoriteFillIcon, (中文(简体) ), LikeIcon, (中文(简体) ), LikeFillIcon, (中文(简体) ), ReviewForumIcon, (中文(简体) ), ReviewForumFillIcon, (中文(简体) ), StarIcon, (中文(简体) ), StarFillIcon
文本格式(4)
BoldIcon, (中文(简体) ), ItalicIcon, (中文(简体) ), ReWriteIcon, (中文(简体) ), UnderlineIcon
其他(56个)
AtIcon, (中文(简体) ), ChartBarIcon, (中文(简体) ), ChartBarFillIcon, (中文(简体) ), CloudDownloadIcon, (中文(简体) ), CloudDownloadFillIcon, (中文(简体) ), CloudOfflineIcon, (中文(简体) ), CloudOfflineFillIcon, (中文(简体) ), CloudOnlineFillIcon, (中文(简体) ), DesktopIcon, (中文(简体) ), DesktopFillIcon, (中文(简体) ), DislikeIcon, (中文(简体) ), DislikeFillIcon, (中文(简体) ), EmojiIcon, (中文(简体) ), FeedIcon, (中文(简体) ), FlagIcon, (中文(简体) ), FlagFillIcon, (中文(简体) ), FundingIcon, (中文(简体) ), FundingFillIcon, (中文(简体) ), GraphLineIcon, (中文(简体) ), HashtagIcon, (中文(简体) ), HistoryIcon, (中文(简体) ), ImageIcon, (中文(简体) ), ImageFillIcon, (中文(简体) ), LabelIcon, (中文(简体) ), LabelFillIcon, (中文(简体) ), LaptopIcon, (中文(简体) ), LaptopFillIcon, (中文(简体) ), LightbulbIcon, (中文(简体) ), LockIcon, (中文(简体) ), MarkAsReadIcon, (中文(简体) ), MarkAsUnreadIcon, (中文(简体) ), MoreIcon, (中文(简体) ), OptOutIcon, (中文(简体) ), PlaceIcon, (中文(简体) ), PlaceFillIcon, (中文(简体) ), PricetagIcon, (中文(简体) ), PricetagFillIcon, (中文(简体) ), PublishIcon, (中文(简体) ), QuoteIcon, (中文(简体) ), QuoteFillIcon, (中文(简体) ), QuoteNoCircledIcon, (中文(简体) ), QuoteNoCircledFillIcon, (中文(简体) ), ReportIcon, (中文(简体) ), RssIcon, (中文(简体) ), RssFillIcon, (中文(简体) ), SettingsIcon, (中文(简体) ), SettingsFillIcon, (中文(简体) ), SoundIcon, (中文(简体) ), StrikethroughIcon, (中文(简体) ), TodayIcon, (中文(简体) ), UpLevelIcon, (中文(简体) ), UploadIcon, (中文(简体) ), VideoIcon
迁移到 v 2. 0.0
2.0.0版本包括从Figma图标库同步中分解更改. 已更新图标名称,以遵循一致的命名惯例.
重命名图标 (6)
| 旧名 | 新名称 | 变动 |
|---|---|---|
CloseCircleFillIcon | CloseCircledFillIcon | 圆 □ 圆 |
QuoteNoCircleFillIcon | QuoteNoCircledFillIcon | 圆 □ 圆 |
QuoteNoCircleIcon | QuoteNoCircledIcon | 圆 □ 圆 |
HelpNoCircleIcon | HelpNoCircledIcon | 圆 □ 圆 |
SettingIcon | SettingsIcon | 设置 − 设置 |
TiktokIcon | TikTokIcon | Tiktok – Tiktok (英语) |
更新导入
- import { SettingIcon, TiktokIcon, HelpNoCircleIcon, CloseCircleFillIcon } from '@frontiers/icons'
+ import { SettingsIcon, TikTokIcon, HelpNoCircledIcon, CloseCircledFillIcon } from '@frontiers/icons'
类型脚本
全部类型脚本支持包括:
import type { IconComponent, IconName } from "@frontiers/icons"
import { ChevronRightIcon } from "@frontiers/icons"
const icon: IconComponent = ChevronRightIcon
const name: IconName = "ChevronRightIcon"
软件包导出
{
"exports": {
".": "./dist/index.mjs",
"./components": "./dist/components/index.mjs",
"./svg/*": "./svg/*.svg"
}
}
捐款
关于发展和贡献准则,见 捐款额。 。 。 .
许可证
麻省理工学院
203 个图标 二. 支助 第3组 二. 支助 类型脚本 二. 支助 树能震动 二. 支助 零依赖关系