简介
country-flag-icons 是一个开源的 npm 包，用于在前端 Web 应用中方便地引用国家旗帜。
安装
在命令行中，运行以下指令安装 country-flag-icons 包：
npm install country-flag-icons --save
使用
引用
在代码中引用 country-flag-icons：
import 'country-flag-icons' // 或者 var flags = require('country-flag-icons')使用标签
在 HTML 中使用标签 cfi，并在其 country 属性中指定国家码，即可添加相应国家的国旗图像。例如：
<cfi country="cn"></cfi>
结果为：
自定义尺寸
可以在 cfi 标签中添加 width 和 height 属性，以自定义图像的尺寸。例如：
<cfi country="cn" width="50" height="50"></cfi>
结果为：
自定义样式
可以在 cfi 标签中添加 class 属性，以自定义图像的样式。例如：
<cfi country="cn" class="flag"></cfi>
.flag {
border: 1px solid black;
border-radius: 50%;
box-shadow: 2px 2px 2px black;
}结果为：
获取国家码
可以在 JavaScript 中获取 country-flag-icons 中支持的国家码列表，代码示例：
var flags = require('country-flag-icons')
console.log(flags.codes) // ["ad", "ae", "af", "ag", "ai", "al", "am", "an", "ao", "aq", "ar", "as", "at", "au", "aw", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bm", "bn", "bo", "br", "bs", "bt", "bv", "bw", "by", "bz", "ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr", "cu", "cv", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gp", "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", "mg", "mh", "mk", "ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx", "my", "mz", "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "st", "sv", "sy", "sz", "tc", "td", "tf", "tg", "th", "tj", "tk", "tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", "um", "us", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "ye", "yt", "za", "zm", "zw"]总结
country-flag-icons 是一个非常实用的 npm 包，可以在前端 Web 应用中快速方便地引用国家旗帜，并且支持自定义尺寸和样式，非常灵活。希望这篇教程对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad0eb5cbfe1ea0610bc9