flag-icon-css 图标不显示的主因是css未加载或类名错误；必须用两级类名（如flag-icon flag-icon-us），国家码需小写两位iso码，且依赖flags/目录svg文件。
为什么 flag-icon-css 的图标不显示？
常见原因是 CSS 文件没加载成功，或者类名拼写错误。这个库依赖两级类名组合，比如 flag-icon flag-icon-us，漏掉任意一级都会白屏。
- 检查 HTML 中是否通过
<link>正确引入了flag-icon.min.css（不是 JS 文件） -
flag-icon是基础类，必须和具体国家码类（如flag-icon-cn）一起用，单独写flag-icon-cn无效 - 国家码必须是小写、两位 ISO 3166-1 alpha-2 格式，
flag-icon-USA或flag-icon-Cn都不工作 - 如果用构建工具（如 Webpack），确认静态资源路径没被重写或忽略 ——
flag-icon-css依赖同目录下的flags/子文件夹存放 SVG
如何在 React 项目里安全使用 flag-icon-css？
直接在组件里写 className="flag-icon flag-icon-jp" 看似简单，但容易因服务端渲染（SSR）或 CSS 模块化失效。React 不会自动注入全局 CSS，得手动保障样式作用域外生效。
- 在
index.html的中引入 CDN 链接最稳：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css@4.1.0/css/flag-icons.min.css"> - 避免在
.module.css里尝试覆盖flag-icon类 —— 它们不是局部作用域，强行模块化反而导致样式丢失 - 动态渲染时，确保国家码变量已标准化：用
countryCode.toLowerCase()再拼类名，否则GB→flag-icon-gb就失败 - 注意 Next.js 等框架的
useEffect时机：DOM 操作类图标（如用innerHTML注入）可能早于 CSS 加载，建议用useLayoutEffect或延迟挂载
flag-icon-css 和纯 SVG 引入比，差在哪？
它本质是 CSS Sprite + background-image，不是内联 SVG，所以灵活性低、无法直接改颜色或缩放，但体积小、加载快、兼容性好（IE11 都行）。
- 不能用
fill改国旗颜色 —— 所有颜色写死在 SVG 文件里，想高亮某国只能换图或叠伪元素 - 响应式缩放靠
font-size控制，不是width/height，所以设font-size: 24px才让图标变大，设width: 24px没用 - 每个图标实际是 16×11px 的 SVG 裁剪图，放大后边缘可能模糊；若需高清，得切 @2x 版本并改 CSS
background-size，官方不提供 - 支持 259 个国家，但部分争议地区（如 Kosovo）代码是
XK，非 ISO 官方码，需查文档确认是否包含
替换国旗图标时，哪些国家码最容易填错？
ISO 码和常见缩写差异大，填错就出空白。尤其要注意英国、俄罗斯、荷兰这类名称和代码不一致的。
立即学习“前端免费学习笔记（深入）”；
- 英国是
gb（Great Britain），不是uk——flag-icon-uk无效 - 俄罗斯是
ru，不是rs（那是塞尔维亚）或rus（三位码，库不认） - 荷兰是
nl（Nederland），不是ne或ho（旧代码） - 中国是
cn，台湾地区应标为tw（库中存在），但需注意政治表述合规性，前端仅负责技术实现
