createIconSetFromIcoMoon()の引数の記載方法

発生した問題

React Native上で、IcoMoonを用いて自作したアイコンデータを表示させようとしたところ、警告メッセージが表示され、アイコンも表示されない状況になった。

前提条件（環境）

{
  "name": "XXXXXXXXX",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "expo": "~49.0.15",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-linking": "~5.0.2",
    "expo-module-scripts": "^3.1.0",
    "expo-router": "^2.0.0",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.7.1",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@stylistic/eslint-plugin": "^1.5.3",
    "@types/react": "~18.2.14",
    "@typescript-eslint/eslint-plugin": "^6.17.0",
    "eslint": "^8.56.0",
    "eslint-config-standard-with-typescript": "^43.0.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "typescript": "^5.3.3"
  },
  "private": true
}

表示された警告メッセージ

【iOS】

Error: Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=icomoon.ttf, NSErrorFailingURLKey=icomoon.ttf, _NSURLErrorRelatedURLSessionTaskErrorKey=(

"BackgroundDownloadTask <3539A65F-45FC-4ED5-893D-CDD11D2C656A>.<1>"

), _NSURLErrorFailingURLSessionTaskErrorKey=BackgroundDownloadTask <3539A65F-45FC-4ED5-893D-CDD11D2C656A>.<1>, NSLocalizedDescription=unsupported URL}

Error: Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=icomoon.ttf, NSErrorFailingURLKey=icomoon.ttf, _NSURLErrorRelatedURLSessionTaskErrorKey=(

"BackgroundDownloadTask <3539A65F-45FC-4ED5-893D-CDD11D2C656A>.<1>"

), _NSURLErrorFailingURLSessionTaskErrorKey=BackgroundDownloadTask <3539A65F-45FC-4ED5-893D-CDD11D2C656A>.<1>, NSLocalizedDescription=unsupported URL}

at construct (native)

at apply (native)

at _construct (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4671:28)

at Wrapper (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4629:25)

at construct (native)

at _createSuperInternal (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123825:322)

at call (native)

at CodedError (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123838:26)

【Android】

Error: Call to function 'ExponentFileSystem.downloadAsync' has been rejected.

→ Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x0

Error: Call to function 'ExponentFileSystem.downloadAsync' has been rejected.

→ Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x0

at construct (native)

at apply (native)

at _construct (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:4671:28)

at Wrapper (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:4629:25)

at construct (native)

at _createSuperInternal (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:122569:322)

at call (native)

at CodedError (http://192.168.0.8:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:122582:26)

エラーが発生していたコード

import { createIconSetFromIcoMoon } from "@expo/vector-icons";
import { useFonts } from "expo-font";
import fontData from "../../assets/fonts/icomoon.ttf";
import fontSelection from "../../assets/fonts/selection.json";

const CustomIcon = createIconSetFromIcoMoon(
    fontSelection,
    "IconMoon",
    "icomoon.ttf"
);

/**
 * アイコンフォント読み込み
 *
 * @returns アイコンフォント
 */
export const Icon = (): JSX.Element | null => {
    const [fontLoaded] = useFonts({
        IcoMoon: fontData,
    });

    if (!fontLoaded) {
        return null;
    }

    return <CustomIcon name="plus" size={40} color="red" />;
};

試したこと

useFonts()の引数を変えてみたり、そもそものCustomIconの位置を条件分岐処理の後に置く、など様々に行ったが警告メッセージに変化は無かった。

解決方法

createIconSetFromIcoMoon()の引数にttfファイル名称を拡張子込みで記載していたが、コンポーネント名に置き換えて記載したところ、正常に動作した。

import { createIconSetFromIcoMoon } from "@expo/vector-icons";
import { useFonts } from "expo-font";
import fontData from "../../assets/fonts/icomoon.ttf";
import fontSelection from "../../assets/fonts/selection.json";

const CustomIcon = createIconSetFromIcoMoon(
    fontSelection,
    "IconMoon",
    fontData
);

/**
 * アイコンフォント読み込み
 *
 * @returns アイコンフォント
 */
export const Icon = (): JSX.Element | null => {
    const [fontLoaded] = useFonts({
        IcoMoon: fontData,
    });

    if (!fontLoaded) {
        return null;
    }

    return <CustomIcon name="plus" size={40} color="red" />;
};