如何使用Javascript动态检测图标字体集中是否存在特定图标

该需求完全可以实现，主流实现分为两种思路：预构建阶段提前校验、运行时动态检测，以下是具体实现方案：

方案1：预构建图标映射表（生产环境首推，性能零损耗） #

这是绝大多数业务场景的最优选择，不需要运行时额外计算开销：

• 你在使用iconfont、IcoMoon等工具生成自定义图标字体时，会同步导出包含所有可用图标名称和对应Unicode编码的映射文件（通常命名为selection.json）
• 把该映射文件引入项目，封装自定义图标组件时先做存在性校验，不存在直接返回默认图标
  代码示例：

import customIconMap from './assets/fonts/custom-icon-selection.json';
import { Text } from 'react-native';

// 提前提取所有可用图标名，避免每次渲染都遍历
const availableIconNames = customIconMap.icons.map(
  icon => icon.properties.name
);
const DEFAULT_ICON_NAME = 'default-fallback';

const CustomIcon = ({ name, size = 16, color = '#333' }) => {
  // 校验图标是否存在
  const targetName = availableIconNames.includes(name) ? name : DEFAULT_ICON_NAME;
  // 取对应Unicode编码
  const codePoint = customIconMap.icons.find(
    icon => icon.properties.name === targetName
  ).properties.code;

  return (
    <Text
      style={{
        fontFamily: 'YourCustomIconFontFamily',
        fontSize: size,
        color: color,
      }}
    >
      {String.fromCodePoint(codePoint)}
    </Text>
  );
};

export default CustomIcon;

如果你手动生成字体没有配套映射文件，可以写一个简单的Node脚本遍历字体文件提取所有有效编码，生成自定义映射表提前内置到项目中即可。

方案2：运行时动态检测（适合字体动态加载、无提前映射表的场景） #

如果你的图标字体是运行时动态拉取加载、没有提前拿到映射文件，可以通过Canvas绘制对比宽度的方式判断图标是否存在：

• 原理：字体中不存在的字符会渲染为统一的占位符（问号/豆腐块），相同字号下占位符的宽度固定，对比目标字符和已知无效字符的渲染宽度即可判断是否有效
  代码示例：

import Canvas from 'react-native-canvas';
import * as Font from 'expo-font'; // 非expo项目可用react-native-fonts替代

const checkIconExists = async (iconCodePoint, fontFamily, fontSize = 16) => {
  // 先确保字体已加载完成，避免误判
  await Font.loadAsync({
    [fontFamily]: require('./assets/fonts/custom-icon.ttf'),
  });

  const canvas = new Canvas();
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px ${fontFamily}`;

  // 测量目标字符渲染宽度
  const targetWidth = ctx.measureText(String.fromCodePoint(iconCodePoint)).width;
  // 测量一个肯定不存在的字符（Unicode未分配编码U+FFFF）的宽度作为对照
  const placeholderWidth = ctx.measureText(String.fromCodePoint(0xFFFF)).width;

  return targetWidth !== placeholderWidth;
};

该方案会产生运行时开销，不推荐大量图标批量检测使用。

额外适配提示 #

如果你用的是react-native-vector-icons这类已封装的图标库，直接修改其组件的渲染逻辑，加一层上述的存在性校验即可，不需要完全重写自定义组件。

内容的提问来源于stack exchange，提问作者Mark Lanham