Revert to handling SVGs as components

components/CharacterUnit/index.tsx

@@ -5,6 +5,8 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
+import PlusIcon from '~public/icons/plus.svg'
+
 import './index.scss'
 
 interface Props {
@@ -60,7 +62,7 @@ const CharacterUnit = (props: Props) => {
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="CharacterImage">
                     <img alt={character?.name.en} className="grid_image" src={imageUrl} />
-                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
+                    { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="character"

components/SummonUnit/index.tsx

@@ -6,6 +6,8 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
+import PlusIcon from '~public/icons/plus.svg'
+
 import './index.scss'
 
 interface Props {
@@ -68,7 +70,7 @@ const SummonUnit = (props: Props) => {
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="SummonImage">
                     <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
-                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
+                    { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="summon"

components/WeaponUnit/index.tsx

@@ -6,6 +6,8 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
+import PlusIcon from '~public/icons/plus.svg'
+
 import './index.scss'
 
 interface Props {
@@ -66,7 +68,7 @@ const WeaponUnit = (props: Props) => {
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="WeaponImage">
                     <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
-                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
+                    { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="weapon"

next.config.js

@@ -7,6 +7,10 @@ module.exports = {reactStrictMode: true,
     includePaths: [path.join(__dirname, 'styles')],
   },
   webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"]
+    });
     config.module.rules[2].oneOf.forEach((one) => {
       if (!`${one.issuer?.and}`.includes('_app')) return;
       one.issuer.and = [path.resolve(__dirname)];

package.json

@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@svgr/webpack": "^6.2.0",
     "axios": "^0.25.0",
     "classnames": "^2.3.1",
     "meyer-reset-scss": "^2.0.4",