@onlikee/octicons-vue

Octicons-Vue

这是 Octicons 的 Vue 3 版本图标组件库。
需要 Vue 3.3 或更高版本。

English | 简体中文

安装

npm install @onlikee/octicons-vue

使用

<script setup lang="ts">
import { MarkGithubIcon, XIcon } from '@onlikee/octicons-vue'
import AccessibilityIcon from '@onlikee/octicons-vue/icons/accessibility'
</script>

<template>
  <MarkGithubIcon />
  <XIcon :size="20" fill="#cf222e" />
  <AccessibilityIcon size="medium" aria-label="Accessibility" />
</template>

每个图标组件都支持以下属性：

size 为显示高度，宽度按比例计算。选择不超过目标高度的最大原始图稿；目标小于所有原始尺寸时使用最小图稿。small、medium、large 分别为 16、32、64，仅选择图标实际提供的尺寸。

支持标准 Vue SVG 属性、类名、样式与事件。默认类名为 octicon octicon-<名称>，输出 data-component="Octicon"。aria-label 或 aria-labelledby 决定默认隐藏状态与角色，显式 aria-hidden 优先。非负 tabindex 使 SVG 可聚焦。title 添加标题节点，但不会自动改变隐藏状态。调用方样式可覆盖默认垂直对齐；尺寸计算得到的宽高和 viewBox 优先于传入属性。标准 SVG color 设置 CSS 颜色，显式填充色使用 fill。

fill 属性与根 SVG 的 CSS fill 控制图标填充色；CSS fill 优先于属性。未覆盖填充色时，默认 currentColor 跟随 CSS color。FlagIcon、VscodeIcon 等带有显式 fill="currentColor" 的路径在渲染输出中使用 fill="inherit"，从而继承根 SVG 的填充色。原始 SVG 资源和导出的图标数据保留源属性；子节点的 none 与固定填充色保持不变。

导入方式

可以从包根路径按带 Icon 后缀的名称进行命名导入：

import { CheckIcon, XIcon, MarkGithubIcon } from '@onlikee/octicons-vue'

也可以按需深度导入单个图标：

import CheckIcon from '@onlikee/octicons-vue/icons/check'

框架无关核心包

@onlikee/octicons 提供 SVG 数据、toSVG()、createElement() 和原始 SVG 资源，不依赖框架运行时。详见核心包文档。

开发

Vite 7 开发工具需要 Node 22.12 或更高版本。以下开发命令在仓库根目录执行。

npm install
npm run typecheck
npm run build
npm test

运行 npm run test:browser 并打开输出的本地地址进行浏览器验证。生成模块不纳入 Git；构建和类型检查自动生成源码，测试先构建两个包。npm run generate:check 用于只读比较已有生成结果。

原始 SVG 存放在根目录 icons/；icons/icon-metadata.json 保存别名与受保护图形信息，icons/upstream.json 记录来源版本和提交，icons/LICENSE.octicons 保存上游许可证。

快照包含 Octicons 19.40.0 的 397 个正式名称和三个别名，来源提交为 97825f832c98f817867f770d084c08e3edc6f78c。BookmarkFilledIcon、RepoDeletedIcon 为已弃用的 16 单尺寸别名；PlayIcon 包含 TriangleCircleIcon 的 16/24 图稿。

贡献

欢迎贡献！你可以添加或更新图标，但请确保新增内容遵循 Octicons 的视觉规范。

如果你觉得哪里有问题，请提交issue。

致谢

本项目基于开源的 Octicons 项目构建，全部图标 SVG 来源于 Octicons/icons。

在此真诚感谢设计师、GitHub 以及 Primer 团队。他们创造并持续维护了这样一套细致、清晰且可靠的开发者视觉语言，也为本项目提供了坚实的基础。

许可证与归属说明

本包基于 MIT 许可证发布。

图标路径数据基于 GitHub Primer Octicons，该项目同样采用 MIT 许可证。更多归属信息请参见 NOTICE。