simple-icons

<p align="center"> <img src="https://cdn.simpleicons.org/simpleicons/000/fff" alt="Simple Icons" width=70> <h3 align="center">Simple Icons</h3> <p align="center"> 超过3100个免费的品牌SVG图标。在<a href="https://simpleicons.org">SimpleIcons.org</a>上可以在一个页面上查看所有图标。欢迎在GitHub上提供贡献、修正和请求。</p> </p> <p align="center"> <a href="https://github.com/simple-icons/simple-icons/actions?query=workflow%3AVerify+branch%3Adevelop"><img src="https://img.shields.io/github/actions/workflow/status/simple-icons/simple-icons/verify.yml?branch=develop&logo=github&label=tests" alt="构建状态"/></a> <a href="https://www.npmjs.com/package/simple-icons"><img src="https://yellow-cdn.veclightyear.com/835a84d5/8db7e14e-688f-4021-b907-1f3dd3938e7a.svg?logo=npm" alt="NPM版本"/></a> <a href="https://packagist.org/packages/simple-icons/simple-icons"><img src="https://img.shields.io/packagist/v/simple-icons/simple-icons?logo=packagist&logoColor=white" alt="构建状态"/></a> <br/> <a href="https://simpleicons.org"><img src="https://img.shields.io/badge/dynamic/json?color=informational&label=icons&prefix=%20&logo=simpleicons&query=%24.icons.length&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsimple-icons%2Fsimple-icons%2Fdevelop%2F_data%2Fsimple-icons.json" alt="当前库中的图标数量"/></a> <a href="https://discord.gg/vUXFa7t5xJ"><img src="https://img.shields.io/discord/1142044630909726760?logo=discord&logoColor=white&label=discord" alt="Discord服务器中活跃用户数" /></a> <a href="https://opencollective.com/simple-icons"><img src="https://img.shields.io/opencollective/all/simple-icons?logo=opencollective" alt="Open Collective上的支持者和赞助商"/></a> </p>

使用方法

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

一般用法

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

CDN用法

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

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/[图标别名].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/[图标别名].svg" />

其中[图标别名]替换为您想使用的图标的[别名]，例如：

<img height="32" width="32" src="https://yellow-cdn.veclightyear.com/835a84d5/6871e262-c66d-4976-b6c4-3805ecd6616d.svg" />
<img height="32" width="32" src="https://yellow-cdn.veclightyear.com/835a84d5/a16ef106-930a-4cd9-8968-0b41255c2783.svg" />

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

带颜色的CDN

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

<img height="32" width="32" src="https://cdn.simpleicons.org/[图标别名]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[图标别名]/[颜色]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[图标别名]/[颜色]/[深色模式颜色]" />

其中[颜色]是可选的，可以替换为您想使用的图标的十六进制颜色或CSS关键字。颜色默认为simpleicons.org网站上显示的图标的HEX颜色。[深色模式颜色]用于深色模式。当指定值时，将使用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使用 <img src="https://cdn.simpleicons.org/nodedotjs/000/fff" alt="Node" align=left width=24>

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

npm install simple-icons

所有图标都从单个文件导入，其中[图标别名]替换为大写的[别名]。我们强烈建议使用可以进行树摇（tree shake）的打包工具，如webpack，以移除未使用的图标代码：

// 通过别名导入特定图标：
// import { si[图标别名] } from 'simple-icons'

// 例如：
// 使用import/esm以允许树摇
import { siSimpleicons } from 'simple-icons';
// 或使用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/'
    }
}

注意：如果我们还没有该图标的指南，`guidelines`条目将为`undefined`。
注意：如果我们还没有该图标的许可数据，`license`条目将为`undefined`。
*/

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

import * as icons from 'simple-icons';

TypeScript使用 <img src="https://cdn.simpleicons.org/typescript/000/fff" alt="Typescript" align=left width=19 height=19>

类型定义与包一起捆绑。

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

PHP使用 <img src="https://cdn.simpleicons.org/php/000/fff" alt="Php" align=left width=24 height=24>

图标也可以通过我们的Packagist包获取。安装只需运行：

composer require simple-icons/simple-icons

然后可以按如下方式使用该包，其中[图标别名]替换为[别名]：

<?php
// 通过别名导入特定图标：
echo file_get_contents('path/to/package/icons/[图标别名].svg');

// 例如：
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>
?>

第三方扩展

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

扩展	作者
Blender 插件 <img src="https://cdn.simpleicons.org/blender/000/fff" alt="Blender" align=left width=24 height=24>	@mondeja
Boxy SVG 库 <img src="https://cdn.simpleicons.org/boxysvg/000/fff" alt="Boxy SVG" align=left width=24 height=24>	@Jarek
Drawio 库 <img src="https://cdn.simpleicons.org/diagramsdotnet/000/fff" alt="Drawio" align=left width=24 height=24>	@mondeja
Figma 插件 <img src="https://cdn.simpleicons.org/figma/000/fff" alt="Figma" align=left width=24 height=24>	@LitoMore
Miro 应用 <img src="https://cdn.simpleicons.org/miro/000/fff" alt="Miro" align=left width=24 height=24>	@LitoMore
Raycast 扩展 <img src="https://cdn.simpleicons.org/raycast/000/fff" alt="Raycast" align=left width=24 height=24>	@LitoMore
Stream Deck 图标包 <img src="https://cdn.simpleicons.org/elgato/000/fff" alt="Stream Deck" align=left width=24 height=24>	@mackenly
Webflow 应用 <img src="https://cdn.simpleicons.org/webflow/000/fff" alt="Webflow" align=left width=24 height=24>	@diegoliv

维护一个扩展？提交PR将其添加到上面的列表中。

第三方库

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

库	作者	许可证	Simple Icons 版本
Astro 包 <img src="https://cdn.simpleicons.org/astro/000/fff" alt="Astro" align=left width=24 height=24>	@Aviortheking
Blazor Nuget 包 <img src="https://cdn.simpleicons.org/blazor/000/fff" alt="Blazor" align=left width=24 height=24>	@TimeWarpEngineering
Flutter 包 <img src="https://cdn.simpleicons.org/flutter/000/fff" alt="Flutter" align=left width=24 height=24>	@jlnrrg
Framer 组件 <img src="https://cdn.simpleicons.org/framer/000/fff" alt="Framer" align=left width=24 height=24>	@LitoMore
Hugo 模块 <img src="https://cdn.simpleicons.org/hugo/000/fff" alt="Hugo" align=left width=24 height=24>	@foo-dogsquared
Kirby 插件 <img src="https://cdn.simpleicons.org/kirby/000/fff" alt="Kirby" align=left width=24 height=24>	@runxel
LaTeX 包 <img src="https://cdn.simpleicons.org/latex/000/fff" alt="LaTeX" align=left width=24 height=24>	@ineshbose
Laravel 包 <img src="https://cdn.simpleicons.org/laravel/000/fff" alt="Laravel" align=left width=24 height=24>	@adrian-ub
React 包 <img src="https://cdn.simpleicons.org/react/000/fff" alt="React" align=left width=24 height=24>	@wootsbot
Ruby gem <img src="https://cdn.simpleicons.org/rubygems/000/fff" alt="Ruby" align=left width=24 height=24>	@thepew
Svelte 包 <img src="https://cdn.simpleicons.org/svelte/000/fff" alt="Svelte" align=left width=24 height=24>	@wootsbot
Vue 3 包 <img src="https://cdn.simpleicons.org/vuedotjs/000/fff" alt="Vue" align=left width=24 height=24>	@wyatt-herkamp