README

这是一个开源矢量图标的巨大集合，所有图标都已验证、整理并转换为易于使用的格式。

尽管所有图标集都是开源的，但某些图标集需要署名。

请参阅collections.md以获取图标集及其许可证的列表。

验证和整理

所有图标都经过Iconify Tools处理，以进行整理。

图标解析过程包括

• 非常严格的验证和整理。图标不包含脚本、监听器、字体、位图图像、外部资源和未知元素。
• 单色图标的颜色已被替换为currentColor，这使得通过更改文本颜色来更改图标颜色变得容易。
• 图标内容已优化以减小其大小。

维护

此存储库每周自动更新几次，因此它始终包含所有图标集的最新图标。

格式

图标集存储在IconifyJSON格式中。TypeScript 定义在@iconify/types包中可用。文档可在Iconify 文档网站上找到。

要使用图标集，请使用Iconify Utils。Utils 包在任何 JavaScript 环境中工作：Node.js、Deno、浏览器、隔离的 JavaScript 环境。

使用方法

这些图标可以与许多工具、插件和组件一起使用。它们也可以导出为单独的 SVG 文件。

请参阅Iconify 文档获取更多详细信息。

如何获取此存储库

以下说明适用于 Node.js 和 PHP 项目。

Node.js

运行此命令将图标添加到您的项目

npm install --save @iconify/json

图标将在 node_modules/@iconify/json 中可用

如果您使用 CommonJS 语法，则使用此方法解析任何 json 文件的文件名

import { locate } from '@iconify/json';

// returns location of mdi-light.json
const mdiLightFilename = locate('mdi-light');

PHP

安装并初始化 Composer 项目。请参阅https://getcomposer.org.cn上的文档

然后打开 composer.json 并添加以下代码

"require": {
    "php": ">=5.6",
    "iconify/json": "*"
}

然后运行

composer install

图标将在 vendor/iconify/json/ 中可用

如果您不使用 Composer，请克隆 GitHub 存储库并添加必要的自动加载代码。

要解析任何 json 文件的文件名，请使用此方法

// Returns location of mdi-light.json
$mdiLightLocation = \Iconify\IconsJSON\Finder::locate('mdi-light');

数据格式

Iconify 使用的图标在 json 目录中，以 Iconify JSON 格式。

为什么是 JSON 而不是 SVG？有几个原因

• 易于批量存储图像。
• 仅包含图标的内容，不包含 <svg> 元素，这使得在不进行复杂解析的情况下操作内容变得容易。这也使得创建组件（例如 React 图标组件）变得容易，允许使用框架本地的 SVG 元素。
• 数据可以包含附加内容：图标的别名、图标集信息、分类/标签/主题。

为什么不是 XML？

• JSON 没有额外的工具就更容易解析。所有语言都支持它。

json 文件的格式非常简单

{
  "prefix": "mdi-light",
  "icons": {
    "icon-name": {
      "body": "<g />",
      "width": 24,
      "height": 24
    }
  },
  "aliases": {
    "icon-alias": {
      "parent": "icon-name"
    }
  }
}

"icons" 对象包含所有图标的列表。

每个图标具有以下属性

• body: 图标主体。
• left, top: viewBox 的左和顶坐标，默认为 0。
• width, height：viewBox的尺寸，默认为16。
• rotate：旋转。默认值 = 0。值：0 = 0度，1 = 90度，2 = 180度，3 = 270度。
• hFlip：水平翻转。布尔值，默认 = false。
• vFlip：垂直翻转。布尔值，默认 = false。
• hidden：如果设置为true，则图标被隐藏。这意味着图标由于某些原因从集合中移除，但保留在JSON文件中以防止依赖旧图标的程序崩溃。

可选的"aliases"对象包含图标的别名列表。格式与"icons"对象类似，但没有"body"属性，并添加了指向父图标的"parent"属性。转换属性（rotate, hFlip, vFlip）与父图标的属性合并。任何其他属性都将覆盖父图标的属性。

当多个图标具有相同的值时，将其移动到根对象以减少重复。

{
  "prefix": "mdi-light",
  "icons": {
    "icon1": {
      "body": "<g />"
    },
    "icon2": {
      "body": "<g />"
    },
    "icon-20": {
      "body": "<g />",
      "width": 20,
      "height": 20
    }
  },
  "width": 24,
  "height": 24
}

在上面的示例中，"icon1"和"icon2"的大小为24x24，"icon-20"的大小为20x20。

有关更多信息，请参阅开发者文档

提取单个SVG图标

您可以使用Iconify Utils进行简单的导出过程，或使用Iconify Tools获取更多选项。

使用Iconify Utils（TypeScript）的示例

import { promises as fs } from 'fs';

// Function to locate JSON file
import { locate } from '@iconify/json';

// Various functions from Iconify Utils
import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { defaults } from '@iconify/utils/lib/customisations';

(async () => {
  // Locate icons
  const filename = locate('mdi');

  // Load icon set
  const icons = JSON.parse(await fs.readFile(filename, 'utf8'));

  // Parse all icons
  const exportedSVG: Record<string, string> = Object.create(null);
  parseIconSet(icons, (iconName, iconData) => {
    if (!iconData) {
      // Invalid icon
      console.error(`Error parsing icon ${iconName}`);
      return;
    }

    // Render icon
    const renderData = iconToSVG(iconData, {
      ...defaults,
      height: 'auto',
    });

    // Generate attributes for SVG element
    const svgAttributes: Record<string, string> = {
      'xmlns': 'http://www.w3.org/2000/svg',
      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
      ...renderData.attributes,
    };
    const svgAttributesStr = Object.keys(svgAttributes)
      .map(
        (attr) =>
          // No need to check attributes for special characters, such as quotes,
          // they cannot contain anything that needs escaping.
          `${attr}="${svgAttributes[attr as keyof typeof svgAttributes]}"`
      )
      .join(' ');

    // Generate SVG
    const svg = `<svg ${svgAttributesStr}>${renderData.body}</svg>`;
    exportedSVG[iconName] = svg;
  });

  // Output directory
  const outputDir = 'mdi-export';
  try {
    await fs.mkdir(outputDir, {
      recursive: true,
    });
  } catch (err) {
    //
  }

  // Save all files
  const filenames = Object.keys(exportedSVG);
  for (let i = 0; i < filenames.length; i++) {
    const filename = filenames[i];
    const svg = exportedSVG[filename];
    await fs.writeFile(outputDir + '/' + filename + '.svg', svg, 'utf8');
  }
})();

使用Iconify Tools的相同示例

import { readFile, writeFile, mkdir } from 'fs';
import { SVG } from '@iconify/tools';

const outputDir = 'mdi-export';

// Create target directory
try {
  await mkdir(outputDir, {
    recursive: true,
  });
} catch (err) {
  //
}

// Locate icons
const filename = locate('mdi');

// Load icon set
const data = JSON.parse(await fs.readFile(filename, 'utf8'));

// Create IconSet instance
const iconSet = new IconSet(data);

// Export all icons
await iconSet.forEach(async (name) => {
  const svg = iconSet.toString(name);
  if (!svg) {
    return;
  }

  // Save to file
  await writeFile(`${outputDir}/${name}.svg`, svg, 'utf8');
  console.log(`Saved ${outputDir}/${name}.svg (${svg.length} bytes)`);
});

有关更多导出选项，请参阅Iconify Tools文档

许可证

这是由不同作者创建的图标集合。

请参阅collections.md以获取图标集及其许可证的列表。