world-flags-sprite 是一个基于 CSS Sprite 技术的、用于前端网站开发的 npm 包。该包提供了世界各国国旗的图标，并可以根据需求自行调整显示大小、皮肤等。本文将详细介绍如何使用该 npm 包。
安装
使用 npm 安装 world-flags-sprite：
npm install world-flags-sprite --save
使用
安装完成后，在需要使用国旗图标的页面引入该包：
<link rel="stylesheet" href="node_modules/world-flags-sprite/flags.css">
示例代码
以下代码会展示一个中国国旗图标：
<i class="flag flag-cn"></i>
可以通过修改 flag-cn 中的国家代码来显示其他国旗。国家代码遵守 ISO 3166-1 标准，可以在 该页面 中查看。
自定义国旗图标大小
可以使用 .flag 类来控制国旗图标的大小，例如：
.flag {
width: 20px;
height: 20px;
}该样式将把国旗图标的宽度和高度都设置为 20 像素。同时，你也可以对不同的标签使用不同的样式。例如：
-- -------------------- ---- ------- --- ----- - ------ ----- ------- ----- - ---- ----- - ------ ----- ------- ----- -
这样，能够将不同标签中使用的国旗图标大小都控制到不同的程度。
自定义国旗图标颜色
使用 CSS 的 filter 属性可以轻松地改变国旗图标的颜色。例如，将一枚红色中国国旗的颜色改变为蓝色：
.flag {
filter: invert(19%) sepia(100%) saturate(7476%) hue-rotate(191deg) brightness(100%) contrast(170%);
}这段 CSS 样式将把国旗颜色进行反色处理，使红色变为蓝色，其中的参数可以根据实际需要进行调整。
总结
使用 world-flags-sprite npm 包，我们可以轻松地在前端网站中添加国旗图标，以及自定义它们的大小和颜色。相比于手动绘制国旗图标，使用该 npm 包能够让我们更加专注于网站的开发，减少重复工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38bd