如何将 react-native-vector-icons 与 react-native-web 一起使用？

Question

我已经使用 react-native 和 react-native-web 设置了 monorepo 项目。我为 Android、iOS 和 Web 共享相同的代码库。安装 react-native-vector-icons 后，我在所有三个平台上都有运行代码，它在 Android 和 iOS 中运行良好，但在 Web 中运行不正常。在网络上看起来像下面这样：

我已经按照说明设置了 Webpack here

下面是我的 Webpack 配置 config-overrides.js:

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
    test: /\.ttf$/,
    loader: "file-loader",
    include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"),
};
module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    );
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = ttf; //add the react-native-vector-icons here
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({__DEV__: env !== 'production'})
    );
    return config
};

下面是react-native-vector-icons在我的App.js文件中的使用

import Icon from 'react-native-vector-icons/dist/FontAwesome';

<Icon name="glass" size={24}/>

我不知道为什么图标没有加载或我错过了配置。请帮我。提前谢谢你。

Answer 1

我刚遇到这个但与 react-native-paper 不同的矢量图标问题。

在那种情况下要正确显示图标，必须在指向 ttf 文件的全局 ccs 中定义自定义字体系列。

https://github.com/oblador/react-native-vector-icons#web-with-webpack

Answer 2

经过大量研究，我终于找到了解决方案，如下所述：

add the TTF files and your custom font file into the public directory

Answer 3

好的。因此，假设您使用 nextjs 和 react-native-web。我将逐步向您介绍如何使其在网络上运行。

安装所有这些包 yarn add react-native-vector-icons react-native-svg next-compose-plugins next-transpile-modules

更新您的 next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['react-native-vector-icons', 'react-native-svg']);

module.exports = withPlugins([withTM], {
  images: {
    disableStaticImages: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [ 'url-loader?limit=10000', 'img-loader' ]
      },
    );
    return config
  },
});

转到 node_modules/react-native-vector-icons/Fonts 并复制您需要的所有字体并将它们粘贴到您的 public 文件夹中，就像您将自定义字体添加到项目中一样，您需要包含所有这些字体像你的 style.css

@font-face {
    src: url(Ionicons.ttf);
    font-family: "Ionicons";
}

@font-face {
    src: url(FontAwesome.ttf);
    font-family: "FontAwesome";
}

@font-face {
    src: url(MaterialIcons.ttf);
    font-family: "MaterialIcons";
}

@font-face {
    src: url(Feather.ttf);
    font-family: "Feather";
}

@font-face {
    src: url(MaterialCommunityIcons.ttf);
    font-family: "MaterialCommunityIcons";
}

在您的 _document.js 文件中，确保像这样包含您的 style.css 文件

        <Head>
          <link href="/fonts/style.css" rel="stylesheet"/>
        </Head>

最后导入它 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

并设置 <Icon name="google-play" size={30} color="#900" />

瞧！！！

如何将 react-native-vector-icons 与 react-native-web 一起使用？

How to use react-native-vector-icons with react-native-web?

reactjs

react-native

react-native-web

react-native-vector-icons