Bug Report

Ionic version: [x] 4.x

Current behavior: Using the <IonIcon /> component will always try to retrieve the svg from the wrong location. As far as I can tell, this is an issue with the new @ionic/react release. Looking in the network tab on chrome, I see two different locations for individual svgs.

md-menu (used internally by ionic): http://localhost:3000/static/media/md-menu.4e10f85b.svg
md-happy: http://localhost:3000/svg/md-happy.svg

Since /svg isn’t bundled by CRA, it’ll always return the root object.

Expected behavior: <IonIcon /> should pull the svg from the CORRECT location

Steps to reproduce:

1. Create a new project using create-react-app
2. Create 2 IonIcon components, one loaded by ionic and one random.
3. View project by either using npm start or npm run build.
4. Open the network tab to view sources

class Page extends React.Component {
    render() {
        <IonIcon name='menu' />
        <IonIcon name='happy' />
    }
}
ReactDOM.render(<Page />, document.getElementById('root'))

Ionic info:

Ionic:

   Ionic CLI : 5.2.3 (/usr/local/lib/node_modules/ionic)

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.14.2 (/usr/local/bin/node)
   npm    : 6.10.1
   OS     : macOS Mojave