title: Can't load Expo Vector Icons in Nextjs
body: <p>I have tried a <strong>lot</strong> of different ways to do this, with absolutely zero luck, over multiple days.</p>
  <p>I am trying to use Solito Nativebase Universal Typescript repo to do this:</p>
  <p><a href="https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript" rel="noreferrer">https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript</a></p>
  <p>I have read, and tried everything on this page at least a dozen times:</p>
  <p><a href="https://github.com/GeekyAnts/nativebase-templates/issues/43" rel="noreferrer">https://github.com/GeekyAnts/nativebase-templates/issues/43</a></p>
  <p>My current <code>next.config.js</code> file looks like this:</p>
  <pre><code>/** @type {import('next').NextConfig} */
  
  const { withNativebase } = require('@native-base/next-adapter')
  const withImages = require('next-images')
  const { withExpo } = require('@expo/next-adapter')
  const withFonts = require('next-fonts')
  
  module.exports = withNativebase({
    dependencies: [
      '@expo/next-adapter',
      'next-images',
      'react-native-vector-icons',
      'react-native-vector-icons-for-web',
      'solito',
      'app',
    ],
    plugins: [
      [withFonts, { projectRoot: __dirname }],
      withImages,
      [withExpo, { projectRoot: __dirname }],
    ],
    nextConfig: {
      images: {
        disableStaticImages: true,
      },
      projectRoot: __dirname,
      reactStrictMode: true,
      webpack5: true,
      webpack: (config, options) =&gt; {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          'react-native$': 'react-native-web',
          '@expo/vector-icons': 'react-native-vector-icons',
        }
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ]
        return config
      },
    },
  })
  </code></pre>
  <p>I have also tried using <code>@native-base/icons</code>, again, no luck.</p>
  <p>My end use case is this:</p>
  <pre><code>export const Cart = (props: IIconStyles) =&gt; {
    return (
      &lt;Icon
        as={FontAwesome5}
        name=&quot;shopping-cart&quot;
        size={props.size ? props.size : 6}
        color=&quot;gray.200&quot;
      /&gt;
    )
  </code></pre>
  <p>Theoretically it SHOULD show a shopping cart, but instead, this is what I see:</p>
  <p><a href="https://i.stack.imgur.com/I9JMq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/I9JMq.png" alt="question mark icon" /></a></p>
  <p>So clearly there's some font issue or other issue that is preventing it from loading in the actual SVG.</p>
  <p>I can't figure out what this is - I've tried rewriting my _document.tsx file like this:</p>
  <p><a href="https://docs.nativebase.io/nb-icons" rel="noreferrer">https://docs.nativebase.io/nb-icons</a></p>
  <p>I've tried adding this to my <code>next.config.js</code>:</p>
  <pre><code> config.module.rules.push({
     test: /\.ttf$/,
     loader: &quot;url-loader&quot;, // or directly file-loader
     include: path.resolve(__dirname, &quot;node_modules/@native-base/icons&quot;),
   });
  </code></pre>
  <p>When I try to do something like this:</p>
  <pre><code>import fontsCSS from '@native-base/icons/FontsCSS';
  </code></pre>
  <p>in my <code>_document.tsx</code> file, I get the following error:</p>
  <pre><code>Module not found: Can't resolve '@native-base/icons/lib/FontsCSS'
  </code></pre>
  <p>Despite the fact that I've got @native-base/icons installed in my package.json, as well as having it in my Babel file per the instruction link above.</p>
  <p>How do I get vector icons to work in Next?</p>
  <p>Note, this is <strong>specifically</strong> Next/Expo/React Native</p>