README

Simple Icons

超过 3200 个流行品牌的免费 SVG 图标。在 SimpleIcons.org 上查看所有图标。可以在 GitHub 上提交贡献、更正和请求。

使用方法

重要

我们要求所有用户在使用 Simple Icons 的图标之前阅读我们的 法律免责声明。

通用使用

图标可以直接从 我们的网站 下载为 SVG - 只需点击所需图标的下载按钮，下载就会自动开始。

CDN 使用

图标可以从 CDN，如 jsDelivr 或 unpkg 提供服务。只需使用 simple-icons npm 包，并在 URL 中指定版本，如下所示

<img height="32" width="32" src="https://cdn.jsdelivr.net.cn/npm/simple-icons@v13/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/[ICON SLUG].svg" />

其中 [ICON SLUG] 用您要使用的图标的 别名 替换，例如

<img height="32" width="32" src="https://cdn.jsdelivr.net.cn/npm/simple-icons@v13/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/simpleicons.svg" />

这些示例使用最新主要版本。这意味着在下一个主要版本发布后，您不会收到任何更新。您可以使用 @latest 来无限期接收更新。然而，如果图标被删除，这会导致 404 错误。

带颜色的 CDN

我们还提供了一种 CDN 服务，允许您使用颜色。

<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]/[DARK_MODE_COLOR]" />

其中 [COLOR] 是可选的，可以用您要使用的图标的 十六进制颜色 或 CSS 关键字 替换。默认颜色为在 simpleicons.org 网站上 显示的图标的十六进制颜色。[DARK_MODE_COLOR] 用于暗模式。如果指定了值，将使用 CSS prefers-color-scheme。例如

<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/orange/pink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/_/eee" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/eee/_" />

您可以使用 viewbox=auto 参数来获取自动大小的视图框。如果您希望所有图标渲染为一致大小，这很有用

<img height="20" src="https://cdn.simpleicons.org/github?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/simpleicons?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/awesomelists?viewbox=auto" />

Node 使用

图标也可以通过我们的 npm 包获得。要安装，只需运行

npm install simple-icons

所有图标都是从单个文件导入的，其中 [ICON SLUG] 由大写的 slug 替换。我们强烈建议使用能够摇树的打包器，例如 webpack，以删除未使用的图标代码

// Import a specific icon by its slug as:
// import { si[ICON SLUG] } from 'simple-icons'

// For example:
// use import/esm to allow tree shaking
import { siSimpleicons } from 'simple-icons';
// or with require/cjs
const { siSimpleicons } = require('simple-icons');

它将返回一个图标对象

console.log(siSimpleicons);

/*
{
    title: 'Simple Icons',
    slug: 'simpleicons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
    path: 'M12 12v-1.5c-2.484 ...',
    guidelines: 'https://simpleicons.org/styleguide',
    license: {
        type: '...',
        url: 'https://example.com/'
    }
}

NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
*/

如果您需要遍历所有图标，请使用

import * as icons from 'simple-icons';

TypeScript 使用方法

类型定义与包捆绑在一起。

import type { SimpleIcon } from 'simple-icons';

PHP 使用方法

图标也通过我们的 Packagist 包提供。安装时，只需运行

composer require simple-icons/simple-icons

然后可以按以下方式使用此包，其中 [ICON SLUG] 由一个 slug 替换

<?php
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');

// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');

// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>

第三方扩展

以下是已知的第三方工具扩展。

维护扩展？ 提交 PR 以将其包含在上面的列表中。

第三方库

以下是已知用于您自己的项目的第三方库。我们只保留至少与我们上一个主要版本更新的项目。

维护库？ 提交 PR 以将其包含在上面的列表中。

贡献

有关如何贡献的信息可以在文件 CONTRIBUTING.md 中找到

贡献者