@baybreezy/ file-extension-icon (英语)

现代、 文件及文件夹扩展名的首个软件包

完整重写 file-extension-icon-js 采用现代的TypeScript,无害环境管理第一方法,以及UnJS生态系统,以获得最佳的性能和开发者经验.

* 特性

• 🎨 两个图标主题: 材料图标 主题和 VSCode 图标
• 🔷 类型脚本: 具有综合类型定义的完整类型安全
• 📦 零依赖关系: 无运行时间依赖性
• 🌳 树能震动: 只捆绑您使用的
• 🔄 双格式无害环境管理和共同JS支助
• 🚀 现代建筑: 为优化输出而用倒建来构建
• ✅ 测试良好: 全面试验覆盖率
• 📝 有记录: 完整的联合来文文件评论和实例
• 🖥️ 包括国别学习: 用于浏览和导出图标的交互式终端工具

* 安装

# @antfu/ni
npx ni @baybreezy/file-extension-icon

使用量

基本用途

import {
  getMaterialFileIcon,
  getMaterialFolderIcon,
  getVSIFileIcon,
  getVSIFolderIcon,
} from "@baybreezy/file-extension-icon";

// Get Material Design file icon
const jsIcon = getMaterialFileIcon("index.js");
// Returns: "data:image/svg+xml;base64,..."

// Get Material Design folder icon (closed)
const folderIcon = getMaterialFolderIcon("components");

// Get Material Design folder icon (open)
const openFolderIcon = getMaterialFolderIcon("components", true);

// Get VSCode file icon
const tsIcon = getVSIFileIcon("app.ts");

// Get VSCode folder icon
const vsiFolderIcon = getVSIFolderIcon("src", true);

框架实例

反应 / Vue / Svelte

import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";

function FileIcon({ fileName }: { fileName: string }) {
  const icon = getMaterialFileIcon(fileName);

  return <img src={icon} alt={fileName} width={24} height={24} />;
}

HTML 语言

<script type="module">
  import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";

  const icon = getMaterialFileIcon("index.html");
  document.getElementById("icon").src = icon;
</script>

<img id="icon" alt="html" width="24" height="24" />

高级使用

import {
  convertToBase64,
  createDataUri,
  findIconInCollection,
  getIconFromMap,
  getMaterialFileIcon,
} from "@baybreezy/file-extension-icon";

// The package intelligently matches file names
getMaterialFileIcon("app.component.ts"); // Matches Angular component
getMaterialFileIcon("test.spec.ts"); // Matches test file
getMaterialFileIcon("package.json"); // Matches package.json
getMaterialFileIcon("Dockerfile"); // Matches Docker

// Works with any file extension
getMaterialFileIcon("script.py");
getMaterialFileIcon("style.scss");
getMaterialFileIcon("README.md");

API 参考

材料图标

getMaterialFileIcon(fileName: string): string

使用材料图标主题返回给定文件名的已编码的 SVG 基础数据 URI .

参数:

• fileName (字符串):有或无路径的文件名(例如, "index.js", (中文(简体) ), "src/app.ts"(中文(简体) )

回返情况: Base64 编码数据 URI 字符串

示例

const icon = getMaterialFileIcon("index.js");
// => "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0..."

getMaterialFolderIcon(folderName: string, open?: boolean): string

使用“材料图标”主题返回给定文件夹名称的基数64编码的 SVG 数据 URI .

参数:

• folderName (字符串):文件夹名称
• open (布尔,可选): 是否返回打开的文件夹图标 。 默认 : false

回返情况: Base64 编码数据 URI 字符串

示例

const closedIcon = getMaterialFolderIcon("components");
const openIcon = getMaterialFolderIcon("components", true);

VSCode 图标

getVSIFileIcon(fileName: string): string

使用 VSCode 图标主题返回给定文件名的基准64-编码的 SVG 数据 URI .

参数:

• fileName (字符串): 有或没有路径的文件名

回返情况: Base64 编码数据 URI 字符串

getVSIFolderIcon(folderName: string, open?: boolean): string

使用 VSCode 图标主题返回给定文件夹名的已编码的 SVG 基准数据 URI .

参数:

• folderName (字符串):文件夹名称
• open (布尔,可选): 是否返回打开的文件夹图标 。 默认 : false

回返情况: Base64 编码数据 URI 字符串

工具函数

该套件还输出用于高级用途的公用功能:

import {
  convertToBase64,
  createDataUri,
  findIconInCollection,
  getIconFromMap,
} from "@baybreezy/file-extension-icon";

QQ CLI 工具

此软件包包含一个交互的 CLI 工具,用于浏览和导出图标 !

# Run interactively
npx file-icon

# Or with flags for quick export
npx file-icon -t material -y file -n "index.js" --copy

CLI 特性

• QQ 浏览材料和 VSCode 图标主题
• 通过文件/文件夹名搜索或浏览所有图标
• 复制到剪贴板、 保存到文件或显示在终端
• 快速而美丽的UI由Clack供电

完整 CLI 文档

QQ 套装大小

这个软件包包含材料和VSCode图标主题的综合图标数据.

• 软件包大小( 压缩): ~ 2.6 MB 键
• 未包装大小:~8.6 MB 键
• 包括: 千个文件和文件夹图标

说明: 现代捆绑有树摇可以只包含您使用的图标来显著地减少最终捆绑的大小. 确保您的捆绑器被配置为树摇摆来优化捆绑大小 .

优化提示

1. 只导入您需要的 :

   // ✅ Good - Tree-shakeable
   import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";
   // ❌ Avoid - Imports everything
   import * as Icons from "@baybreezy/file-extension-icon";
   

2. 使用现代捆绑器 有摇树支持(Vite、Rollup、esbuild、webpack 5+)

3. 考虑代码分割 如果您支持多个图标主题

发展

# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in UI mode
npm run test:ui

# Type check
npm run typecheck

# Lint code
npm run lint

测试

这一一揽子计划包括全面测试范围:

# Run tests in watch mode
npm test

# Generate coverage report
npm run test:coverage

# Open test UI
npm run test:ui

捐款

欢迎捐款! 请随意提交拉力请求.

许可证

麻省理工学院 贝洪贝克

功劳和承认

此软件包是一个完整的类型脚本重写 file-extension-icon-js 以 MD. 明哈祖尔伊斯兰教。 。 。 .

原始软件包

• 原作者数字 : MD. 明哈祖尔伊斯兰教
• 原始软件包数字 : 文件扩展缩写
• 许可证麻省理工学院

图标来源

• 材料图标 主题 由菲利普·基夫(Philipp Kief)撰写
• VSCode 图标 由 VSCode 图标团队

灵感

• vscode-icons-js (英语) 由多米尼克·德雷克(Dominik Dere-ǰanik)出演
• 文件缩写 按网络语义

链接

• GitHub 仓库
• npm 软件包
• 问题跟踪器
• 作者网站

由 Q 制作 贝洪贝克