怎么打包用flag icons:国旗SVG图标集

开头段

flag-icons 是一个收集了所有国家国旗 SVG 图标库，附带 CSS 样式，让开发者能快速把国旗图标嵌入网页或应用里。GitHub 上 12.4k star、1.9k fork，MIT 协议随便用，从 2013 年维护到现在还在更新——对需要展示国家/地区标识的开发者来说，是个省事的现成方案。

如果你是做多语言站点、跨境电商独立站、国际业务后台的开发者，这套图标库能省掉你到处找国旗素材的功夫。下面拆解它的用法、能解决的问题，以及哪些坑要注意。

适合谁

做国际业务的前端开发者。 后台管理系统里经常要显示用户所在国家，或者订单发往地区，用 flag-icons 一行代码就能带上国旗图标。

需要多语言切换界面的开发者。 语言选择器旁边配个国旗，用户一眼认出自己国家，比纯文字直观得多，这个库正好干这个。

做数据可视化或地图类项目的开发者。 需要按国家维度展示数据，配国旗做图例或标签，SVG 格式放大缩小不糊。

能解决什么问题

国家代码转国旗，不用自己切图。 只需要给元素加 fi 和 fi-xx（xx 是 ISO 3166-1-alpha-2 国家代码，比如 cn、us、jp），CSS 自动把对应国旗背景贴上去。省去了手动下载、命名、维护一堆图片文件的麻烦。

方形旗帜和标准比例旗帜都要有。 加个 fis 类就是方形版本，不加就是标准的 4:3 比例旗帜，两种场景都覆盖。

批量打包只留需要的国家。 通过 SASS 配置 $flag-icons-included-countries 这个变量，可以指定只用哪些国家的国旗，CSS 文件能瘦身不少，不用全量加载两百多个国家的图标。

怎么开始用

安装方式有三种，npm 和 Yarn 都可以：

npm install flag-icons
# 或
yarn add flag-icons

引入 CSS 有两种方式，项目里用 import：

import "/node_modules/flag-icons/css/flag-icons.min.css";

或者用 CDN 直接引：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
/>

在 HTML 里用，空 span 加类名：

<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>

第一个是希腊国旗标准比例，第二个是希腊国旗方形版本。

用 SASS 可以自定义，只打指定国家的包：

@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "node_modules/flag-icons/flags",
  $flag-icons-included-countries: ("gr", "de", "gb")
);

这样只编译希腊、德国、英国三个国家的国旗进 CSS。

优点和坑

优点：

• 覆盖全。 所有国家的国旗都在，按 ISO 标准代码命名，不用自己找齐。
• 集成成本低。 CSS 一引，类名一加就出图，不需要 JavaScript，也不需要额外配置。
• MIT 协议。 商用免费，没有版权顾虑。

坑：

• CDN 版本是写死的。 README 里的 CDN 链接指向 @7.3.2 这个版本，如果后续版本有更新，链接不会自动跟进，得手动改版本号。
• SASS 自定义需要构建步骤。 想只打包部分国家的国旗，得用 SASS 版本并重新 build，如果项目没配 SASS 编译链，这一步就有额外成本。
• 非方形元素用 fib 类要自己设尺寸。 给任意元素加国旗背景时，背景是 contain 居中不重复，你得手动保证元素是 4:3 或方形比例，否则旗帜显示会变形或被裁切。
• 国旗图标远看辨识度一般。 SVG 本身清晰，但缩小到 16px、20px 这种尺寸时，某些图案相近的国旗（比如荷兰和卢森堡）比较难一眼分清，界面上最好配合文字标签用。

适合你吗

适合：前端项目要展示国家/地区信息，不想自己维护一堆国旗图片；做多语言切换或国际业务后台；项目用 CSS 或 SASS 技术栈，加个依赖成本很低。

不适合：需要高清大图展示国旗细节的场景（这库定位是 UI 图标不是图片素材）；项目没有构建步骤、只用纯 HTML 不想引入外部依赖的；需要动态加载按需拉取的场景——这库是一次性把所有国旗都打进 CSS 里的。

整体来说，flag-icons 是个干活利索的小工具，装上就能用，维护了十多年还在更新，靠谱程度不错。

常见问题

flag-icons 这个工具是干什么用的？

flag-icons 是一个包含了全球所有国家国旗的 SVG 图标库，附带 CSS 样式。开发者只需添加简单的 CSS 类名（如 fi fi-cn），就能在网页或应用中快速嵌入对应国旗图标，无需自己下载和切图，非常适合多语言网站、跨境电商后台等需要展示国家标识的场景。

flag-icons 是免费的吗？

是的，完全免费。该项目采用 MIT 开源协议，自 2013 年维护至今，允许个人和商业项目免费使用，没有版权顾虑。你可以在 GitHub 上找到它，目前已有超过 12.4k 的 star。

怎么安装和使用 flag-icons？

可以通过 npm 或 Yarn 安装：npm install flag-icons。然后在项目中引入 CSS 文件，或在 HTML 中直接使用 CDN 链接。使用时，只需给一个空元素添加类名，例如 即可显示美国国旗。

flag-icons 支持哪些国家代码？

它支持完整的 ISO 3166-1 alpha-2 国家代码，例如 cn（中国）、us（美国）、jp（日本）等。所有国家的国旗都已涵盖，并按此标准命名，开发者无需自己查找和匹配。

如何用 flag-icons 只打包我需要的几个国家国旗？

可以通过 SASS 配置实现。在 SASS 文件中使用 $flag-icons-included-countries 变量，例如指定 ("gr", "de", "gb")，重新编译后就只会包含希腊、德国、英国三个国家的国旗 CSS，可以有效减小文件体积。

相关工具推荐

• React Icons 图标组件库的打包与使用方法
• Sketch Compose 多平台图像加载库介绍
• 使用 blind watermark 为商品图片添加防搬运盲水印