@ featherk/ icons (英语)
由 Kendo UI 提供的一套 SVG 图标 SvgIcon 组件.
建造和试验 坚道UI代表Vue 6.4.1 (单位:千美元)@progress/kendo-vue-common 是一个可选的同伴依赖).
使用量
获得圣像有两种方法. 两者都为剑道返回相同的图标对象 SvgIcon; 它们在图标设置了多少应用程序捆绑上有所不同.
| 前进 | 自兹 | 你的应用程序包 |
|---|---|---|
已命名的导入 : import { searchIcon } | 0.1.8. (中文(简体) ) | 只有您导入的图标( 每个在 1 KB 以下) |
getCustomIcon("search") (单位:千美元)CustomIcon(中文(简体) ) | 在此之前 | 包中的每个图标( 大约120 KB gzip) |
getCustomIcon 不变且完全向后兼容,因此已存在的代码继续工作而不作修改. 因为它看起来图标的名字,一个捆绑者无法分辨你使用的是哪个,所以可以装入所有的. 切换到命名的导入只装入您指定的图标 .
已命名进口( 建议)
每个图标都有一个命名导出: 骆驼中的图标名称 大小写加 Icon这样 date_range 实值 dateRangeIcon编辑 图标 列出每个导出名称.
<template>
<SvgIcon :icon="searchIcon" />
</template>
<script setup lang="ts">
import { SvgIcon } from "@progress/kendo-vue-common";
import { searchIcon } from "@featherk/icons";
</script>
getCustomIcon (装入每个图标)
使用 getCustomIcon 当图标名称只在运行时已知时,或更改颜色或视图框。 它需要一个 CustomIcon 名称并返回每个调用的新图标对象 :
import { getCustomIcon } from "@featherk/icons";
const icon = getCustomIcon("search");
通话 getCustomIcon 应用程序中的任何部分都会将完整的图标集捆绑起来,即使命名的导入被其它地方使用. 这同样适用于进口 icons 登记.
类型
CustomIcon: 支持的图标标识字符串的结合(参见packages/icons/src/custom-icon.ts) (中文(简体) ).GetCustomIconOptions数字 :{ viewBox?: string; color?: string }—— 说viewBox覆盖 SVG 视图框 ;color替换currentColor填充/中风.
示例——键入图标名称:
import type { CustomIcon } from "@featherk/icons";
const iconName: CustomIcon = "search";
// const badIcon: CustomIcon = "not-a-real-icon"; // Type error
示例 — 使用带有帮助的打出的名称 :
import { getCustomIcon, type CustomIcon } from "@featherk/icons";
const iconName: CustomIcon = "help";
const icon = getCustomIcon(iconName);
示例——更改视图框和颜色:
<template>
<SvgIcon :icon="helpIcon" />
<SvgIcon :icon="successIcon" />
</template>
<script setup lang="ts">
import { SvgIcon } from "@progress/kendo-vue-common";
import { getCustomIcon } from "@featherk/icons";
const helpIcon = getCustomIcon("help", {
viewBox: "0 0 28 28",
color: "var(--kendo-color-primary)",
});
const successIcon = getCustomIcon("check", {
color: "var(--kendo-color-success)",
});
</script>
用于实验和开发中的帮助者职能(CSS帮助者,基础64) 变体、数据URL使用和相关公用设施) 即将到来。 。 。 .
图标画廊
字体优美构建集成
字体优美服务与 getCustomIcon() 和自有图标注册。 他们从消费者所安装的Font Cousin软件包中生成所选图标;该软件包包括没有免费或付费的Font Cousin艺术品并授予任何许可证权利.
一个只按键的列表驱动整个设置 :
# 1. List UX-provided catalog keys in fontawesome.keys.json: { "free": [...], "pro": [...] }
# 2. Install exactly those source packages: Free into the app, Pro into fontawesome-pro-sources/.
# (Add --free-only when there are no Pro keys.)
npx featherk-fontawesome-setup --manifest fontawesome.keys.json
// 3. Generate them in vite.config.ts; builds include Pro icons wherever fontawesome-pro-sources/ is installed.
featherkFontAwesome({ manifest: "fontawesome.keys.json" });
跟随 FeatherK FontAsome 开发者设置 当地和CI的逐步设置。 见 选择字体优美图标并创建声明 用于键,以及 字体真棒设置 快速启动和高级设置。 仅限元数据的自由/Pro目录发布于 @featherk/icons/fontawesome/catalog。 。 。 .
付费源包见 许可和设置有利可图是消费者拥有的和可选择的;该套产品没有分发付费艺术品.
添加图标
本套件中的图标由已验证的源资产管理 南特卫生/摄影见 图标贡献指南 用于源到包复制和生成工作流程.
更改日志
向所有人公布历史 @featherk/* 软件包以单一方式维护 变动情况。 。 。 .