diff --git a/packages/webapp/src/components/InviteSignup/index.jsx b/packages/webapp/src/components/InviteSignup/index.jsx
index 4f0dc2ea70..4733ae6100 100644
--- a/packages/webapp/src/components/InviteSignup/index.jsx
+++ b/packages/webapp/src/components/InviteSignup/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { Error, Main, Semibold, Title } from '../Typography';
import { useTranslation } from 'react-i18next';
import Card from '../Card';
-import { ReactComponent as GoogleLogo } from '../../assets/images/inviteSignUp/google-logo.svg';
+import GoogleLogo from '../../assets/images/inviteSignUp/google-logo.svg?react';
import styles from './styles.module.scss';
const cardStyle = {
diff --git a/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx b/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
index 5154da83db..6215127997 100644
--- a/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
+++ b/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
@@ -4,7 +4,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Main, Title } from '../Typography';
-import { ReactComponent } from '../../assets/images/outro/outro.svg';
+import ReactComponent from '../../assets/images/outro/outro.svg?react';
export default function PureJoinFarmSuccessScreen({ onClick, farm_name, showSpotLight }) {
const { t } = useTranslation(['translation', 'common']);
diff --git a/packages/webapp/src/components/Layout/TitleLayout.jsx b/packages/webapp/src/components/Layout/TitleLayout.jsx
index bce99b3acb..f08d551f6c 100644
--- a/packages/webapp/src/components/Layout/TitleLayout.jsx
+++ b/packages/webapp/src/components/Layout/TitleLayout.jsx
@@ -1,7 +1,7 @@
import Layout from './index';
import { Title } from '../Typography';
import React from 'react';
-import BackArrow from '../../assets/images/miscs/arrow.svg';
+import BackArrow from '../../assets/images/miscs/arrow.svg?react';
import { useTranslation } from 'react-i18next';
function TitleLayout({ buttonGroup, title, onGoBack = null, children, onCancel }) {
@@ -10,11 +10,7 @@ function TitleLayout({ buttonGroup, title, onGoBack = null, children, onCancel }
{onGoBack && (
- <img
- src={BackArrow}
- style={{ marginBottom: '-5px', cursor: 'pointer' }}
- onClick={onGoBack}
- />
+ <BackArrow style={{ marginBottom: '-5px', cursor: 'pointer' }} onClick={onGoBack} />
)}{' '}
{title}
{onCancel && (
diff --git a/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx b/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
index e310bc91aa..44635ddad5 100644
--- a/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
+++ b/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
@@ -16,8 +16,8 @@ import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as UncheckedEnabled } from '../../../../assets/images/unchecked-enabled.svg';
-import { ReactComponent as CheckedEnabled } from '../../../../assets/images/checked-enabled.svg';
+import UncheckedEnabled from '../../../../assets/images/unchecked-enabled.svg?react';
+import CheckedEnabled from '../../../../assets/images/checked-enabled.svg?react';
import { BsChevronRight } from 'react-icons/bs';
export default function IconDescriptionListItem({
diff --git a/packages/webapp/src/components/Loading/Loading.jsx b/packages/webapp/src/components/Loading/Loading.jsx
index 717b5207a9..c0366ffbc1 100644
--- a/packages/webapp/src/components/Loading/Loading.jsx
+++ b/packages/webapp/src/components/Loading/Loading.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as LoadingAnimation } from '../../assets/images/signUp/animated_loading_farm.svg';
+import LoadingAnimation from '../../assets/images/signUp/animated_loading_farm.svg?react';
import React from 'react';
import { colors } from '../../assets/theme';
diff --git a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Field/index.jsx b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Field/index.jsx
index d8c3552c82..9f535c65dc 100644
--- a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Field/index.jsx
+++ b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Field/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import AreaDetails from '../AreaDetails';
import { useForm, useFormContext } from 'react-hook-form';
-import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg?react';
import Input from '../../../Form/Input';
import { fieldEnum } from '../../../../containers/constants';
import { Label } from '../../../Typography';
@@ -97,7 +97,7 @@ export function FieldDetailsChildren({ isViewLocationPage }) {
<Label style={{ paddingRight: '10px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.FIELD.FIELD_TYPE')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block' }} />
+ <Leaf style={{ display: 'inline-block' }} />
</div>
<RadioGroup
diff --git a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Garden/index.jsx b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Garden/index.jsx
index e6aeefdcfe..d4245563c5 100644
--- a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Garden/index.jsx
+++ b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Garden/index.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useFormContext } from 'react-hook-form';
-import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg?react';
import Input, { getInputErrors } from '../../../Form/Input';
import { gardenEnum } from '../../../../containers/constants';
import { Label } from '../../../Typography';
@@ -99,7 +99,7 @@ export function GardenDetailsChildren({ isViewLocationPage }) {
>
{t('FARM_MAP.GARDEN.GARDEN_TYPE')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block' }} />
+ <Leaf style={{ display: 'inline-block' }} />
</div>
<RadioGroup
required={true}
diff --git a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Greenhouse/index.jsx b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Greenhouse/index.jsx
index 21bd964017..27d1900d67 100644
--- a/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Greenhouse/index.jsx
+++ b/packages/webapp/src/components/LocationDetailLayout/AreaDetails/Greenhouse/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import AreaDetails from '../AreaDetails';
import { useForm, useFormContext } from 'react-hook-form';
-import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg?react';
import Input from '../../../Form/Input';
import { greenhouseEnum } from '../../../../containers/constants';
import { Label } from '../../../Typography';
@@ -99,7 +99,7 @@ export function GreenhouseDetailsChildren({ isViewLocationPage }) {
<Label style={{ paddingRight: '10px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.GREENHOUSE.GREENHOUSE_TYPE')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block' }} />
+ <Leaf style={{ display: 'inline-block' }} />
</div>
<RadioGroup
required={true}
@@ -142,7 +142,7 @@ export function GreenhouseDetailsChildren({ isViewLocationPage }) {
<Label style={{ paddingRight: '7px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.GREENHOUSE.SUPPLEMENTAL_LIGHTING')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block', paddingRight: '10px' }} />
+ <Leaf style={{ display: 'inline-block', paddingRight: '10px' }} />
<Label style={{ display: 'inline-block' }} sm>
{t('common:OPTIONAL')}
</Label>
@@ -159,7 +159,7 @@ export function GreenhouseDetailsChildren({ isViewLocationPage }) {
<Label style={{ paddingRight: '7px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.GREENHOUSE.CO2_ENRICHMENT')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block', paddingRight: '10px' }} />
+ <Leaf style={{ display: 'inline-block', paddingRight: '10px' }} />
<Label style={{ display: 'inline-block' }} sm>
{t('common:OPTIONAL')}
</Label>
@@ -176,7 +176,7 @@ export function GreenhouseDetailsChildren({ isViewLocationPage }) {
<Label style={{ paddingRight: '7px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.GREENHOUSE.GREENHOUSE_HEATED')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block', paddingRight: '10px' }} />
+ <Leaf style={{ display: 'inline-block', paddingRight: '10px' }} />
<Label style={{ display: 'inline-block' }} sm>
{t('common:OPTIONAL')}
</Label>
diff --git a/packages/webapp/src/components/LocationDetailLayout/LineDetails/Fence/index.jsx b/packages/webapp/src/components/LocationDetailLayout/LineDetails/Fence/index.jsx
index 29477bb00f..d4684e4cd9 100644
--- a/packages/webapp/src/components/LocationDetailLayout/LineDetails/Fence/index.jsx
+++ b/packages/webapp/src/components/LocationDetailLayout/LineDetails/Fence/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import LineDetails from '../LineDetails';
import { useForm, useFormContext } from 'react-hook-form';
-import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../../assets/images/farmMapFilter/Leaf.svg?react';
import { bufferZoneEnum, fenceEnum } from '../../../../containers/constants';
import { Label } from '../../../Typography';
import { line_length } from '../../../../util/convert-units/unit';
@@ -112,7 +112,7 @@ export function FenceDetailsChildren({ system, isViewLocationPage }) {
<Label style={{ paddingRight: '7px', display: 'inline-block', fontSize: '16px' }}>
{t('FARM_MAP.FENCE.PRESSURE_TREATED')}
</Label>
- <img src={Leaf} style={{ display: 'inline-block', paddingRight: '10px' }} />
+ <Leaf style={{ display: 'inline-block', paddingRight: '10px' }} />
<Label style={{ display: 'inline-block' }} sm>
{t('common:OPTIONAL')}
</Label>
diff --git a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/index.jsx b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/index.jsx
index ed7eac1065..7c1d6044f3 100644
--- a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/index.jsx
+++ b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/index.jsx
@@ -10,7 +10,7 @@ import {
isPoint,
DEFAULT_MAX_ZOOM,
} from '../../../containers/Map/constants';
-import MapPin from '../../../assets/images/map/map_pin.svg';
+import MapPin from '../../../assets/images/map/map_pin.svg?react';
import {
createMarkerClusters,
DEFAULT_POLYGON_OPACITY,
diff --git a/packages/webapp/src/components/Logs/HarvestUseType/index.jsx b/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
index bf004876b3..ccc5a9042f 100644
--- a/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
+++ b/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
@@ -5,15 +5,15 @@ import Button from '../../Form/Button';
import styles from './styles.module.scss';
import { useTranslation } from 'react-i18next';
-import { ReactComponent as Sales } from '../../../assets/images/log/v2/Sales.svg';
-import { ReactComponent as SelfConsumption } from '../../../assets/images/log/v2/SelfConsumption.svg';
-import { ReactComponent as AnimalFeed } from '../../../assets/images/log/v2/AnimalFeed.svg';
-import { ReactComponent as Compost } from '../../../assets/images/log/v2/Compost.svg';
-import { ReactComponent as NotSure } from '../../../assets/images/log/v2/NotSure.svg';
-import { ReactComponent as Gift } from '../../../assets/images/log/v2/Gift.svg';
-import { ReactComponent as Exchange } from '../../../assets/images/log/v2/Exchange.svg';
-import { ReactComponent as Seed } from '../../../assets/images/log/v2/Seed.svg';
-import { ReactComponent as Custom } from '../../../assets/images/log/v2/Custom.svg';
+import Sales from '../../../assets/images/log/v2/Sales.svg?react';
+import SelfConsumption from '../../../assets/images/log/v2/SelfConsumption.svg?react';
+import AnimalFeed from '../../../assets/images/log/v2/AnimalFeed.svg?react';
+import Compost from '../../../assets/images/log/v2/Compost.svg?react';
+import NotSure from '../../../assets/images/log/v2/NotSure.svg?react';
+import Gift from '../../../assets/images/log/v2/Gift.svg?react';
+import Exchange from '../../../assets/images/log/v2/Exchange.svg?react';
+import Seed from '../../../assets/images/log/v2/Seed.svg?react';
+import Custom from '../../../assets/images/log/v2/Custom.svg?react';
import clsx from 'clsx';
export default function PureHarvestUseType({
@@ -125,6 +125,7 @@ function UseTypeMatrix({ useTypes, onClick, selectedUseTypes }) {
selectedUseTypes.includes(type.harvest_use_type_id) && styles.selectedMatrixItem,
)}
onClick={() => onClick(type.harvest_use_type_id)}
+ key={i}
>
{buttonImg}
<div className={styles.buttonName}>{useTypeName}</div>
diff --git a/packages/webapp/src/components/Map/CustomCompass/index.jsx b/packages/webapp/src/components/Map/CustomCompass/index.jsx
index 94d3156825..850e9a2167 100644
--- a/packages/webapp/src/components/Map/CustomCompass/index.jsx
+++ b/packages/webapp/src/components/Map/CustomCompass/index.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as NorthLogo } from '../../../assets/images/map/North_Icon.svg';
+import NorthLogo from '../../../assets/images/map/North_Icon.svg?react';
export default function CustomCompass({ className, style, onClick }) {
return (
diff --git a/packages/webapp/src/components/Map/CustomZoom/index.jsx b/packages/webapp/src/components/Map/CustomZoom/index.jsx
index 2a9749af05..4d026036e2 100644
--- a/packages/webapp/src/components/Map/CustomZoom/index.jsx
+++ b/packages/webapp/src/components/Map/CustomZoom/index.jsx
@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as ZoomInLogo } from '../../../assets/images/map/zoomIn.svg';
-import { ReactComponent as ZoomOutLogo } from '../../../assets/images/map/zoomOut.svg';
+import ZoomInLogo from '../../../assets/images/map/zoomIn.svg?react';
+import ZoomOutLogo from '../../../assets/images/map/zoomOut.svg?react';
export default function CustomZoom({ className, style, onClickZoomIn, onClickZoomOut }) {
return (
diff --git a/packages/webapp/src/components/Map/DrawingManager/index.jsx b/packages/webapp/src/components/Map/DrawingManager/index.jsx
index 1eab828559..5d36442ba7 100644
--- a/packages/webapp/src/components/Map/DrawingManager/index.jsx
+++ b/packages/webapp/src/components/Map/DrawingManager/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
import { useTranslation } from 'react-i18next';
-import { ReactComponent as BackIcon } from '../../../assets/images/map/back.svg';
+import BackIcon from '../../../assets/images/map/back.svg?react';
import clsx from 'clsx';
import PureWarningBox from '../../WarningBox';
import Button from '../../Form/Button';
diff --git a/packages/webapp/src/components/Map/Footer/index.jsx b/packages/webapp/src/components/Map/Footer/index.jsx
index ec1db05003..b9d804e28a 100644
--- a/packages/webapp/src/components/Map/Footer/index.jsx
+++ b/packages/webapp/src/components/Map/Footer/index.jsx
@@ -1,9 +1,9 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as AddLogo } from '../../../assets/images/map/add.svg';
-import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter.svg';
-import { ReactComponent as ExportLogo } from '../../../assets/images/map/export.svg';
+import AddLogo from '../../../assets/images/map/add.svg?react';
+import FilterLogo from '../../../assets/images/map/filter.svg?react';
+import ExportLogo from '../../../assets/images/map/export.svg?react';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import MapDrawer from '../../MapDrawer';
diff --git a/packages/webapp/src/components/Map/Header/index.jsx b/packages/webapp/src/components/Map/Header/index.jsx
index 9fb2459160..06038ad381 100644
--- a/packages/webapp/src/components/Map/Header/index.jsx
+++ b/packages/webapp/src/components/Map/Header/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
import { useTranslation } from 'react-i18next';
-import VideoLogo from '../../../assets/images/map/video.svg';
+import VideoLogo from '../../../assets/images/map/video.svg?react';
import clsx from 'clsx';
export default function PureMapHeader({ className, style, farmName, showVideo, isAdmin }) {
@@ -17,9 +17,7 @@ export default function PureMapHeader({ className, style, farmName, showVideo, i
{' | '}
<span className={styles.farmMap}>{t('FARM_MAP.TITLE')}</span>
</div>
- {isAdmin && (
- <input type="image" src={VideoLogo} className={styles.button} onClick={showVideo} />
- )}
+ {isAdmin && <VideoLogo className={styles.button} onClick={showVideo} />}
</div>
);
}
diff --git a/packages/webapp/src/components/Map/LineMapBoxes/index.jsx b/packages/webapp/src/components/Map/LineMapBoxes/index.jsx
index c6f8cbcfed..5df49eb147 100644
--- a/packages/webapp/src/components/Map/LineMapBoxes/index.jsx
+++ b/packages/webapp/src/components/Map/LineMapBoxes/index.jsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
import { locationEnum } from '../../../containers/Map/constants';
import { useForm } from 'react-hook-form';
import { Main } from '../../Typography';
-import BackArrow from '../../../assets/images/miscs/arrow.svg';
+import BackArrow from '../../../assets/images/miscs/arrow.svg?react';
import { useTranslation } from 'react-i18next';
import Button from '../../Form/Button';
import { watercourseEnum } from '../../../containers/constants';
@@ -78,9 +78,8 @@ export default function PureLineBox({
<div className={clsx(styles.box)} {...props}>
<div style={{ flexOrder: 1 }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
- <img
+ <BackArrow
onClick={onClickBack}
- src={BackArrow}
style={{ cursor: 'pointer', flexOrder: 1, paddingBottom: '24px' }}
/>
<div style={{ flexOrder: 2, flexGrow: '5', paddingBottom: '24px' }}>
diff --git a/packages/webapp/src/components/Map/LocationMapping/index.jsx b/packages/webapp/src/components/Map/LocationMapping/index.jsx
index baaa8ac785..0ce059c236 100644
--- a/packages/webapp/src/components/Map/LocationMapping/index.jsx
+++ b/packages/webapp/src/components/Map/LocationMapping/index.jsx
@@ -1,19 +1,19 @@
import { locationEnum } from '../../../containers/Map/constants';
-import { ReactComponent as Gate } from '../../../assets/images/farmMapFilter/Gate.svg';
-import { ReactComponent as WaterValve } from '../../../assets/images/farmMapFilter/WaterValve.svg';
-import { ReactComponent as Sensor } from '../../../assets/images/farmMapFilter/Sensor.svg';
-import { ReactComponent as BufferZone } from '../../../assets/images/farmMapFilter/BufferZone.svg';
-import { ReactComponent as Watercourse } from '../../../assets/images/farmMapFilter/Creek.svg';
-import { ReactComponent as Fence } from '../../../assets/images/farmMapFilter/Fence.svg';
-import { ReactComponent as Barn } from '../../../assets/images/farmMapFilter/Barn.svg';
-import { ReactComponent as CeremonialArea } from '../../../assets/images/farmMapFilter/CA.svg';
-import { ReactComponent as FarmSiteBoundary } from '../../../assets/images/farmMapFilter/FSB.svg';
-import { ReactComponent as Field } from '../../../assets/images/farmMapFilter/Field.svg';
-import { ReactComponent as Garden } from '../../../assets/images/farmMapFilter/Garden.svg';
-import { ReactComponent as Greenhouse } from '../../../assets/images/farmMapFilter/Greenhouse.svg';
-import { ReactComponent as SurfaceWater } from '../../../assets/images/farmMapFilter/SurfaceWater.svg';
-import { ReactComponent as NaturalArea } from '../../../assets/images/farmMapFilter/NA.svg';
-import { ReactComponent as Residence } from '../../../assets/images/farmMapFilter/Residence.svg';
+import Gate from '../../../assets/images/farmMapFilter/Gate.svg?react';
+import WaterValve from '../../../assets/images/farmMapFilter/WaterValve.svg?react';
+import Sensor from '../../../assets/images/farmMapFilter/Sensor.svg?react';
+import BufferZone from '../../../assets/images/farmMapFilter/BufferZone.svg?react';
+import Watercourse from '../../../assets/images/farmMapFilter/Creek.svg?react';
+import Fence from '../../../assets/images/farmMapFilter/Fence.svg?react';
+import Barn from '../../../assets/images/farmMapFilter/Barn.svg?react';
+import CeremonialArea from '../../../assets/images/farmMapFilter/CA.svg?react';
+import FarmSiteBoundary from '../../../assets/images/farmMapFilter/FSB.svg?react';
+import Field from '../../../assets/images/farmMapFilter/Field.svg?react';
+import Garden from '../../../assets/images/farmMapFilter/Garden.svg?react';
+import Greenhouse from '../../../assets/images/farmMapFilter/Greenhouse.svg?react';
+import SurfaceWater from '../../../assets/images/farmMapFilter/SurfaceWater.svg?react';
+import NaturalArea from '../../../assets/images/farmMapFilter/NA.svg?react';
+import Residence from '../../../assets/images/farmMapFilter/Residence.svg?react';
export const pointImgDict = [
{
diff --git a/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx b/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
index 61cc4c5b5c..ff205d24c9 100644
--- a/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
+++ b/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import MapTutorialModal from '../../../Modals/MapTutorialModal';
import PropTypes from 'prop-types';
-// import { ReactComponent as AdjustAreaImg } from '../../../../assets/images/map/adjustArea.svg';
+// import AdjustAreaImg from '../../../../assets/images/map/adjustArea.svg?react';
import gif from '../../../../assets/images/map/adjustArea.gif';
import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx b/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
index 21f2e7f6e7..0b757fd98d 100644
--- a/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
+++ b/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import MapTutorialModal from '../../../Modals/MapTutorialModal';
import PropTypes from 'prop-types';
-// import { ReactComponent as AdjustAreaImg } from '../../../../assets/images/map/adjustArea.svg';
+// import AdjustAreaImg from '../../../../assets/images/map/adjustArea.svg?react';
import gif from '../../../../assets/images/map/adjustLine.gif';
import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Map/SelectionHandler/index.jsx b/packages/webapp/src/components/Map/SelectionHandler/index.jsx
index ac9ea80a58..c0e5a2d698 100644
--- a/packages/webapp/src/components/Map/SelectionHandler/index.jsx
+++ b/packages/webapp/src/components/Map/SelectionHandler/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { areaImgDict, lineImgDict, pointImgDict } from '../LocationMapping';
-import { ReactComponent as ShowMore } from '../../../assets/images/map/arrowDown.svg';
+import ShowMore from '../../../assets/images/map/arrowDown.svg?react';
import { containsCrops } from '../../../containers/Map/constants';
import { makeStyles } from '@mui/styles';
import { colors } from '../../../assets/theme';
diff --git a/packages/webapp/src/components/MapDrawer/index.jsx b/packages/webapp/src/components/MapDrawer/index.jsx
index 3013a9de64..509b2996ca 100644
--- a/packages/webapp/src/components/MapDrawer/index.jsx
+++ b/packages/webapp/src/components/MapDrawer/index.jsx
@@ -2,23 +2,23 @@ import { useMemo } from 'react';
import clsx from 'clsx';
import List from '@mui/material/List';
import { Label, Underlined } from '../Typography';
-import { ReactComponent as MapBackground } from '../../assets/images/farmMapFilter/MapBackground.svg';
-import { ReactComponent as LabelIcon } from '../../assets/images/farmMapFilter/Label.svg';
-import { ReactComponent as Barn } from '../../assets/images/farmMapFilter/Barn.svg';
-import { ReactComponent as CeremonialArea } from '../../assets/images/farmMapFilter/CA.svg';
-import { ReactComponent as FarmSiteBoundary } from '../../assets/images/farmMapFilter/FSB.svg';
-import { ReactComponent as Field } from '../../assets/images/farmMapFilter/Field.svg';
-import { ReactComponent as Garden } from '../../assets/images/farmMapFilter/Garden.svg';
-import { ReactComponent as Greenhouse } from '../../assets/images/farmMapFilter/Greenhouse.svg';
-import { ReactComponent as SurfaceWater } from '../../assets/images/farmMapFilter/SurfaceWater.svg';
-import { ReactComponent as NaturalArea } from '../../assets/images/farmMapFilter/NA.svg';
-import { ReactComponent as Residence } from '../../assets/images/farmMapFilter/Residence.svg';
-import { ReactComponent as BufferZone } from '../../assets/images/farmMapFilter/BufferZone.svg';
-import { ReactComponent as Watercourse } from '../../assets/images/farmMapFilter/Creek.svg';
-import { ReactComponent as Fence } from '../../assets/images/farmMapFilter/Fence.svg';
-import { ReactComponent as Gate } from '../../assets/images/farmMapFilter/Gate.svg';
-import { ReactComponent as WaterValve } from '../../assets/images/farmMapFilter/WaterValve.svg';
-import { ReactComponent as Sensor } from '../../assets/images/farmMapFilter/Sensor.svg';
+import MapBackground from '../../assets/images/farmMapFilter/MapBackground.svg?react';
+import LabelIcon from '../../assets/images/farmMapFilter/Label.svg?react';
+import Barn from '../../assets/images/farmMapFilter/Barn.svg?react';
+import CeremonialArea from '../../assets/images/farmMapFilter/CA.svg?react';
+import FarmSiteBoundary from '../../assets/images/farmMapFilter/FSB.svg?react';
+import Field from '../../assets/images/farmMapFilter/Field.svg?react';
+import Garden from '../../assets/images/farmMapFilter/Garden.svg?react';
+import Greenhouse from '../../assets/images/farmMapFilter/Greenhouse.svg?react';
+import SurfaceWater from '../../assets/images/farmMapFilter/SurfaceWater.svg?react';
+import NaturalArea from '../../assets/images/farmMapFilter/NA.svg?react';
+import Residence from '../../assets/images/farmMapFilter/Residence.svg?react';
+import BufferZone from '../../assets/images/farmMapFilter/BufferZone.svg?react';
+import Watercourse from '../../assets/images/farmMapFilter/Creek.svg?react';
+import Fence from '../../assets/images/farmMapFilter/Fence.svg?react';
+import Gate from '../../assets/images/farmMapFilter/Gate.svg?react';
+import WaterValve from '../../assets/images/farmMapFilter/WaterValve.svg?react';
+import Sensor from '../../assets/images/farmMapFilter/Sensor.svg?react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import { locationEnum } from '../../containers/Map/constants';
diff --git a/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx b/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
index b566bc8ca7..a4a817ea62 100644
--- a/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
+++ b/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
@@ -18,7 +18,7 @@ import ModalComponent from '../ModalComponent/v2';
import Button from '../../Form/Button';
import styles from './styles.module.scss';
import { useTranslation } from 'react-i18next';
-import { ReactComponent as HazardIcon } from '../../../assets/images/warning.svg';
+import HazardIcon from '../../../assets/images/warning.svg?react';
const BiodiversityLoadingModal = ({ dismissModal, loadingError }) => {
const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Modals/BulkSensorUploadModal/FileUploader.jsx b/packages/webapp/src/components/Modals/BulkSensorUploadModal/FileUploader.jsx
index a8f17dab5a..aa1c8d5791 100644
--- a/packages/webapp/src/components/Modals/BulkSensorUploadModal/FileUploader.jsx
+++ b/packages/webapp/src/components/Modals/BulkSensorUploadModal/FileUploader.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as UploadIcon } from '../../../assets/images/map/upload.svg';
+import UploadIcon from '../../../assets/images/map/upload.svg?react';
import { Label, Underlined } from '../../Typography';
import clsx from 'clsx';
diff --git a/packages/webapp/src/components/Modals/CertificationsModal/index.jsx b/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
index 6f8e97bc60..23ffe00bbe 100644
--- a/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
+++ b/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as NewFeatureIcon } from '../../../assets/images/home/new-feature.svg';
+import NewFeatureIcon from '../../../assets/images/home/new-feature.svg?react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ModalComponent from '../ModalComponent/v2';
diff --git a/packages/webapp/src/components/Modals/ExportMapModal/index.jsx b/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
index bce61e8c4b..1169376e4e 100644
--- a/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
+++ b/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal } from '../';
-import { ReactComponent as DownloadIcon } from '../../../assets/images/map/download.svg';
+import DownloadIcon from '../../../assets/images/map/download.svg?react';
import { AiOutlineMail } from 'react-icons/ai';
import styles from './styles.module.scss';
import { Main, Title } from '../../Typography';
diff --git a/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx b/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
index 5387273d87..2accf9f098 100644
--- a/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
+++ b/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import ModalComponent from '../ModalComponent/v2';
import styles from './styles.module.scss';
-import { ReactComponent as Email } from '../../../assets/images/export/email/Email.svg';
+import Email from '../../../assets/images/export/email/Email.svg?react';
export default function PreparingExportModal({ dismissModal }) {
const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx b/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
index 96b1c483c2..e3db2dabda 100644
--- a/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
+++ b/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
@@ -4,7 +4,7 @@ import ModalComponent from '../ModalComponent/v2';
import styles from './styles.module.scss';
import Button from '../../Form/Button';
import Checkbox from '../../Form/Checkbox';
-import { ReactComponent as Person } from '../../../assets/images/task/Person.svg';
+import Person from '../../../assets/images/task/Person.svg?react';
import { tasksSelector } from '../../../containers/taskSlice';
import { useSelector } from 'react-redux';
import AssignTask from '../../Task/AssignTask';
diff --git a/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx b/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
index e9fd816a5f..213102f558 100644
--- a/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
+++ b/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Success } from '../../../assets/images/requestConfirmation/success.svg';
+import Success from '../../../assets/images/requestConfirmation/success.svg?react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/ResetPassword/index.jsx b/packages/webapp/src/components/Modals/ResetPassword/index.jsx
index a35904c8bb..37031359f5 100644
--- a/packages/webapp/src/components/Modals/ResetPassword/index.jsx
+++ b/packages/webapp/src/components/Modals/ResetPassword/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as MailIconImg } from '../../../assets/images/resetPassword/mail-icon.svg';
+import MailIconImg from '../../../assets/images/resetPassword/mail-icon.svg?react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx b/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
index f1352f4fd1..6f8470ab64 100644
--- a/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
+++ b/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Success } from '../../../assets/images/resetPassword/success.svg';
+import Success from '../../../assets/images/resetPassword/success.svg?react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx b/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
index e5f562e83d..920f74f9ec 100644
--- a/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
+++ b/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
@@ -4,7 +4,7 @@ import ModalComponent from '../ModalComponent/v2';
import styles from './styles.module.scss';
import Button from '../../Form/Button';
import Input from '../../Form/Input';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/CalendarIcon.svg';
+import CalendarIcon from '../../../assets/images/task/CalendarIcon.svg?react';
import { getDateInputFormat } from '../../../util/moment';
import PropTypes from 'prop-types';
diff --git a/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx b/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
index 7aaf4d449c..5ec3d65cd3 100644
--- a/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
+++ b/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import ModalComponent from '../ModalComponent/v2';
-import { ReactComponent as Calculator } from '../../../assets/images/task/Calculator.svg';
+import Calculator from '../../../assets/images/task/Calculator.svg?react';
import styles from '../QuickAssignModal/styles.module.scss';
import Button from '../../Form/Button';
import PropTypes from 'prop-types';
diff --git a/packages/webapp/src/components/Navigation/Alert.jsx b/packages/webapp/src/components/Navigation/Alert.jsx
index 2d55f6a9e1..75bee29dd3 100644
--- a/packages/webapp/src/components/Navigation/Alert.jsx
+++ b/packages/webapp/src/components/Navigation/Alert.jsx
@@ -1,7 +1,7 @@
import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { ReactComponent as AlertIcon } from '../../assets/images/alert.svg';
+import AlertIcon from '../../assets/images/alert.svg?react';
export default function PureAlert({ alertCount }) {
const useStyles = makeStyles({
diff --git a/packages/webapp/src/components/Navigation/ListOption/index.jsx b/packages/webapp/src/components/Navigation/ListOption/index.jsx
index 4782c3a440..ee7d5f5c4c 100644
--- a/packages/webapp/src/components/Navigation/ListOption/index.jsx
+++ b/packages/webapp/src/components/Navigation/ListOption/index.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './listOption.module.scss';
-import { ReactComponent as LaunchIcon } from '../../../../assets/images/icon_launch.svg';
+import LaunchIcon from '../../../../assets/images/icon_launch.svg?react';
export default function ListOption({
iconText,
diff --git a/packages/webapp/src/components/Navigation/SideMenu/index.jsx b/packages/webapp/src/components/Navigation/SideMenu/index.jsx
index 146e9b2139..9b2a6942b9 100644
--- a/packages/webapp/src/components/Navigation/SideMenu/index.jsx
+++ b/packages/webapp/src/components/Navigation/SideMenu/index.jsx
@@ -14,10 +14,10 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { matchPath } from 'react-router-dom';
import useExpandable from '../../Expandable/useExpandableItem';
-import { ReactComponent as Logo } from '../../../assets/images/middle_logo.svg';
+import Logo from '../../../assets/images/middle_logo.svg?react';
import { useGetMenuItems } from '../../../hooks/useGetMenuItems';
import Drawer from '../../Drawer';
-import { ReactComponent as CollapseMenuIcon } from '../../../assets/images/nav/collapse-menu.svg';
+import CollapseMenuIcon from '../../../assets/images/nav/collapse-menu.svg?react';
import styles from './styles.module.scss';
const MenuItem = forwardRef(({ history, onClick, path, children, className }, ref) => {
diff --git a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
index 9489e4a641..3378e86038 100644
--- a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
+++ b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
@@ -1,18 +1,18 @@
import { useRef, useState } from 'react';
import { logout } from '../../../util/jwt';
import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';
-import { ReactComponent as LogoutIcon } from '../../../assets/images/navbar/logout.svg';
-import { ReactComponent as MyInfoIcon } from '../../../assets/images/navbar/my-info.svg';
-import { ReactComponent as HelpIcon } from '../../../assets/images/navbar/help.svg';
-import { ReactComponent as VideoIcon } from '../../../assets/images/navbar/play-square.svg';
-import { ReactComponent as SwitchFarmIcon } from '../../../assets/images/navbar/switch-farm.svg';
-import { ReactComponent as LaunchIcon } from '../../../assets/images/icon_launch.svg';
-import { ReactComponent as CloseX } from '../../../assets/images/close-x.svg';
-import { ReactComponent as NotificationIcon } from '../../../assets/images/notif.svg';
+import LogoutIcon from '../../../assets/images/navbar/logout.svg?react';
+import MyInfoIcon from '../../../assets/images/navbar/my-info.svg?react';
+import HelpIcon from '../../../assets/images/navbar/help.svg?react';
+import VideoIcon from '../../../assets/images/navbar/play-square.svg?react';
+import SwitchFarmIcon from '../../../assets/images/navbar/switch-farm.svg?react';
+import LaunchIcon from '../../../assets/images/icon_launch.svg?react';
+import CloseX from '../../../assets/images/close-x.svg?react';
+import NotificationIcon from '../../../assets/images/notif.svg?react';
// TODO: use profile picture stored in db
-import { ReactComponent as ProfilePicture } from '../../../assets/images/navbar/defaultpfp.svg';
-import { ReactComponent as IconLogo } from '../../../assets/images/navbar/nav-logo.svg';
-import { ReactComponent as WordsLogo } from '../../../assets/images/middle_logo.svg';
+import ProfilePicture from '../../../assets/images/navbar/defaultpfp.svg?react';
+import IconLogo from '../../../assets/images/navbar/nav-logo.svg?react';
+import WordsLogo from '../../../assets/images/middle_logo.svg?react';
import { BiMenu } from 'react-icons/bi';
import {
AppBar,
diff --git a/packages/webapp/src/components/OrganicCertifierSurvey/SetCertificationSummary/PureSetCertificationSummary.jsx b/packages/webapp/src/components/OrganicCertifierSurvey/SetCertificationSummary/PureSetCertificationSummary.jsx
index 1e70436634..bdb9790e0d 100644
--- a/packages/webapp/src/components/OrganicCertifierSurvey/SetCertificationSummary/PureSetCertificationSummary.jsx
+++ b/packages/webapp/src/components/OrganicCertifierSurvey/SetCertificationSummary/PureSetCertificationSummary.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import { Main, Semibold, Text } from '../../Typography';
import { useTranslation } from 'react-i18next';
import Layout from '../../Layout';
-import Farmland from '../../../assets/images/certification/Farmland.svg';
+import Farmland from '../../../assets/images/certification/Farmland.svg?react';
import { colors } from '../../../assets/theme';
import PageTitle from '../../PageTitle/v2';
@@ -20,7 +20,12 @@ export function PureSetCertificationSummary({
onSubmit={onSubmit}
buttonGroup={
<>
- <Button data-cy='certificationSummary-continue' type={'submit'} fullLength onClick={onSubmit}>
+ <Button
+ data-cy="certificationSummary-continue"
+ type={'submit'}
+ fullLength
+ onClick={onSubmit}
+ >
{t('common:CONTINUE')}
</Button>
</>
@@ -39,7 +44,7 @@ export function PureSetCertificationSummary({
)} ${certifierName} `}
</Semibold>
<div style={{ paddingTop: '20px' }}>
- <img src={Farmland} style={{ width: '100%', transform: 'translateY(-12px)' }} />
+ <Farmland style={{ width: '100%', transform: 'translateY(-12px)' }} />
</div>
<Main style={{ padding: '20px 0' }}>
diff --git a/packages/webapp/src/components/Outro/index.jsx b/packages/webapp/src/components/Outro/index.jsx
index 5fc9b7381b..726994801c 100644
--- a/packages/webapp/src/components/Outro/index.jsx
+++ b/packages/webapp/src/components/Outro/index.jsx
@@ -4,7 +4,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Main } from '../Typography';
-import { ReactComponent } from '../../assets/images/outro/outro.svg';
+import ReactComponent from '../../assets/images/outro/outro.svg?react';
import PageTitle from '../PageTitle/v2';
export default function PureOutroSplash({ onContinue, onGoBack, toShowSpotlight }) {
@@ -12,7 +12,7 @@ export default function PureOutroSplash({ onContinue, onGoBack, toShowSpotlight
return (
<Layout
buttonGroup={
- <Button data-cy='outro-finish' onClick={onContinue} fullLength>
+ <Button data-cy="outro-finish" onClick={onContinue} fullLength>
{t('common:FINISH')}
</Button>
}
diff --git a/packages/webapp/src/components/PopupFilter/PureCollapsibleSearch/index.jsx b/packages/webapp/src/components/PopupFilter/PureCollapsibleSearch/index.jsx
index ddf4f41282..ad43e73d39 100644
--- a/packages/webapp/src/components/PopupFilter/PureCollapsibleSearch/index.jsx
+++ b/packages/webapp/src/components/PopupFilter/PureCollapsibleSearch/index.jsx
@@ -17,7 +17,7 @@ import { useState, useRef, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import styles from './styles.module.scss';
-import { ReactComponent as SearchIcon } from '../../../assets/images/search.svg';
+import SearchIcon from '../../../assets/images/search.svg?react';
import Input from '../../Form/Input';
import TextButton from '../../Form/Button/TextButton';
import { Modal } from '../../Modals';
diff --git a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
index 91062616d6..6b271277a1 100644
--- a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
+++ b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
@@ -7,8 +7,8 @@ import styles from './styles.module.scss';
import { BsChevronDown } from 'react-icons/bs';
import { Main, Semibold } from '../../Typography';
import Radio from '../../Form/Radio';
-import { ReactComponent as CalendarDown } from '../../../assets/images/taskFilter/CalendarDown.svg';
-import { ReactComponent as CalendarUp } from '../../../assets/images/taskFilter/CalendarUp.svg';
+import CalendarDown from '../../../assets/images/taskFilter/CalendarDown.svg?react';
+import CalendarUp from '../../../assets/images/taskFilter/CalendarUp.svg?react';
import clsx from 'clsx';
import PageBreak from '../../PageBreak';
import { ClickAwayListener } from '@mui/base/ClickAwayListener';
diff --git a/packages/webapp/src/components/Profile/Farm/FarmImagePicker.tsx b/packages/webapp/src/components/Profile/Farm/FarmImagePicker.tsx
index bc807a28fc..f4553e80e7 100644
--- a/packages/webapp/src/components/Profile/Farm/FarmImagePicker.tsx
+++ b/packages/webapp/src/components/Profile/Farm/FarmImagePicker.tsx
@@ -12,15 +12,14 @@
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
*/
-
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { MediaWithAuthentication } from '../../../containers/MediaWithAuthentication';
import PureFilePickerWrapper from '../../Form/FilePickerWrapper';
import TextButton from '../../Form/Button/TextButton';
import styles from './styles.module.scss';
-import { ReactComponent as CameraIcon } from '../../../assets/images/farm-profile/camera.svg';
-import { ReactComponent as TrashIcon } from '../../../assets/images/farm-profile/trash.svg';
-import { ReactComponent as EditIcon } from '../../../assets/images/farm-profile/edit.svg';
+import CameraIcon from '../../../assets/images/farm-profile/camera.svg?react';
+import TrashIcon from '../../../assets/images/farm-profile/trash.svg?react';
+import EditIcon from '../../../assets/images/farm-profile/edit.svg?react';
import { AddLink } from '../../Typography';
import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/PureSnackbar/index.jsx b/packages/webapp/src/components/PureSnackbar/index.jsx
index 6e1727dad9..e6cca650f5 100644
--- a/packages/webapp/src/components/PureSnackbar/index.jsx
+++ b/packages/webapp/src/components/PureSnackbar/index.jsx
@@ -1,8 +1,8 @@
import React, { forwardRef, useState } from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.scss';
-import { ReactComponent as Cross } from '../../assets/images/map/cross.svg';
-import { ReactComponent as Checkmark } from '../../assets/images/map/checkmark.svg';
+import Cross from '../../assets/images/map/cross.svg?react';
+import Checkmark from '../../assets/images/map/checkmark.svg?react';
import clsx from 'clsx';
import ProgressBar from '../Map/ProgressBar';
import { VscWarning } from 'react-icons/vsc';
@@ -43,8 +43,9 @@ export const PureSnackbar = forwardRef(({ message, type, onDismiss }, ref) => (
<PureSnackbarWithoutBorder title={message} onDismiss={onDismiss} type={type} />
</div>
));
+PureSnackbar.displayName = 'PureSnackbar';
-PureSnackbarWithoutBorder.prototype = {
+PureSnackbarWithoutBorder.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
farmName: PropTypes.string,
@@ -52,7 +53,7 @@ PureSnackbarWithoutBorder.prototype = {
type: PropTypes.oneOf(['success', 'error']),
};
-PureSnackbar.prototype = {
+PureSnackbar.propTypes = {
type: PropTypes.oneOf(['success', 'error']),
message: PropTypes.string,
onDismiss: PropTypes.func,
diff --git a/packages/webapp/src/components/Rating/index.jsx b/packages/webapp/src/components/Rating/index.jsx
index d5fb548fa3..d9e7a97ff1 100644
--- a/packages/webapp/src/components/Rating/index.jsx
+++ b/packages/webapp/src/components/Rating/index.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import styles from './styles.module.scss';
import clsx from 'clsx';
-import { ReactComponent as RatingStar } from '../../assets/images/rating/Star.svg';
+import RatingStar from '../../assets/images/rating/Star.svg?react';
import { Label } from '../Typography';
import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/ReleaseBadge/index.jsx b/packages/webapp/src/components/ReleaseBadge/index.jsx
index 54ec883ce5..782f4b6913 100644
--- a/packages/webapp/src/components/ReleaseBadge/index.jsx
+++ b/packages/webapp/src/components/ReleaseBadge/index.jsx
@@ -20,9 +20,9 @@ import { useTranslation } from 'react-i18next';
import styles from './styles.module.scss';
import { Semibold, Text } from '../Typography';
import TextButton from '../Form/Button/TextButton';
-import { ReactComponent as Close } from '../../assets/images/release/x-circle.svg';
-import { ReactComponent as NewBubble } from '../../assets/images/release/new-bubble.svg';
-import { ReactComponent as ChevronRight } from '../../assets/images/release/chevron-right-dk-red.svg';
+import Close from '../../assets/images/release/x-circle.svg?react';
+import NewBubble from '../../assets/images/release/new-bubble.svg?react';
+import ChevronRight from '../../assets/images/release/chevron-right-dk-red.svg?react';
const ReleaseBadge = ({ releaseNotesLink, className, isCompactSideMenu }) => {
const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Svg/index.jsx b/packages/webapp/src/components/Svg/index.jsx
deleted file mode 100644
index 5bd6121fcf..0000000000
--- a/packages/webapp/src/components/Svg/index.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import styles from './svg.module.scss';
-import PropTypes from 'prop-types';
-
-const WelcomeSVG = ({ svg, alt }) => {
- return <img src={svg} alt={alt} className={styles.svg} loading={'lazy'} />;
-};
-WelcomeSVG.propTypes = {
- svg: PropTypes.string.isRequired,
- alt: PropTypes.string.isRequired,
-};
-export default WelcomeSVG;
diff --git a/packages/webapp/src/components/Svg/svg.module.scss b/packages/webapp/src/components/Svg/svg.module.scss
deleted file mode 100644
index a5594b8453..0000000000
--- a/packages/webapp/src/components/Svg/svg.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.svg {
- width: 95%;
- height: auto;
- max-width: 600px;
-}
diff --git a/packages/webapp/src/components/Table/Header/TableHead.jsx b/packages/webapp/src/components/Table/Header/TableHead.jsx
index 780fe1a956..90c7d01cc9 100644
--- a/packages/webapp/src/components/Table/Header/TableHead.jsx
+++ b/packages/webapp/src/components/Table/Header/TableHead.jsx
@@ -18,8 +18,8 @@ import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import clsx from 'clsx';
-import { ReactComponent as UnfoldCircle } from '../../../assets/images/unfold-circle.svg';
-import { ReactComponent as ArrowDownCircle } from '../../../assets/images/arrow-down-circle.svg';
+import UnfoldCircle from '../../../assets/images/unfold-circle.svg?react';
+import ArrowDownCircle from '../../../assets/images/arrow-down-circle.svg?react';
import styles from '../styles.module.scss';
export default function EnhancedTableHead({ columns, order, orderBy, onRequestSort, dense }) {
diff --git a/packages/webapp/src/components/Task/AddProduct/index.jsx b/packages/webapp/src/components/Task/AddProduct/index.jsx
index 650a3ac4cc..bfbe86848f 100644
--- a/packages/webapp/src/components/Task/AddProduct/index.jsx
+++ b/packages/webapp/src/components/Task/AddProduct/index.jsx
@@ -1,6 +1,6 @@
import ReactSelect from '../../Form/ReactSelect';
import React, { useEffect, useMemo, useState } from 'react';
-import { ReactComponent as Leaf } from '../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../assets/images/farmMapFilter/Leaf.svg?react';
import { useTranslation } from 'react-i18next';
import Input, { getInputErrors } from '../../Form/Input';
import RadioGroup from '../../Form/RadioGroup';
diff --git a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
index ce375cb912..d9c682479c 100644
--- a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
+++ b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
@@ -6,7 +6,7 @@ import PageTitle from '../../PageTitle/v2';
import { AddLink } from '../../Typography';
import styles from './styles.module.scss';
import clsx from 'clsx';
-import { ReactComponent as CustomTask } from '../../../assets/images/task/Custom.svg';
+import CustomTask from '../../../assets/images/task/Custom.svg?react';
export const PureManageCustomTasks = ({
handleGoBack,
@@ -53,25 +53,25 @@ export const PureManageCustomTasks = ({
{customTasks
.sort((firstEl, secondEl) => firstEl.task_name.localeCompare(secondEl.task_name))
.map(({ task_translation_key, task_type_id, task_name }) => {
- return (
- <div
- onClick={() => {
- onTileClick(task_type_id);
- }}
- key={task_type_id}
- >
+ return (
<div
- className={clsx(
- styles.typeContainer,
- selected_task_type === task_type_id && styles.typeContainerSelected,
- )}
+ onClick={() => {
+ onTileClick(task_type_id);
+ }}
+ key={task_type_id}
>
- <CustomTask />
- <div className={styles.taskTypeLabelContainer}>{task_name}</div>
+ <div
+ className={clsx(
+ styles.typeContainer,
+ selected_task_type === task_type_id && styles.typeContainerSelected,
+ )}
+ >
+ <CustomTask />
+ <div className={styles.taskTypeLabelContainer}>{task_name}</div>
+ </div>
</div>
- </div>
- );
- })}
+ );
+ })}
</div>
</Form>
</>
diff --git a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
index 97d1339b9d..024220d635 100644
--- a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
+++ b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
@@ -4,24 +4,24 @@ import Form from '../../Form';
import MultiStepPageTitle from '../../PageTitle/MultiStepPageTitle';
import { Main } from '../../Typography';
import styles from './styles.module.scss';
-import { ReactComponent as CollectSoilSample } from '../../../assets/images/task/CollectSoilSample.svg';
-import { ReactComponent as Transport } from '../../../assets/images/task/Transport.svg';
-import { ReactComponent as Clean } from '../../../assets/images/task/Clean.svg';
-import { ReactComponent as Fertilize } from '../../../assets/images/task/Fertilize.svg';
-import { ReactComponent as FieldWork } from '../../../assets/images/task/FieldWork.svg';
-import { ReactComponent as Harvest } from '../../../assets/images/task/Harvest.svg';
-import { ReactComponent as Irrigation } from '../../../assets/images/task/Irrigation.svg';
-import { ReactComponent as Maintenance } from '../../../assets/images/task/Maintenance.svg';
-import { ReactComponent as PestControl } from '../../../assets/images/task/PestControl.svg';
-import { ReactComponent as Plant } from '../../../assets/images/task/Plant.svg';
-import { ReactComponent as RecordSoilSample } from '../../../assets/images/task/RecordSoilSample.svg';
-import { ReactComponent as Sales } from '../../../assets/images/task/Sales.svg';
-import { ReactComponent as Scout } from '../../../assets/images/task/Scout.svg';
-import { ReactComponent as SocialEvent } from '../../../assets/images/task/SocialEvent.svg';
-import { ReactComponent as SoilAmendment } from '../../../assets/images/task/SoilAmendment.svg';
-import { ReactComponent as Transplant } from '../../../assets/images/task/Transplant.svg';
-import { ReactComponent as WashAndPack } from '../../../assets/images/task/WashAndPack.svg';
-import { ReactComponent as CustomTask } from '../../../assets/images/task/Custom.svg';
+import CollectSoilSample from '../../../assets/images/task/CollectSoilSample.svg?react';
+import Transport from '../../../assets/images/task/Transport.svg?react';
+import Clean from '../../../assets/images/task/Clean.svg?react';
+import Fertilize from '../../../assets/images/task/Fertilize.svg?react';
+import FieldWork from '../../../assets/images/task/FieldWork.svg?react';
+import Harvest from '../../../assets/images/task/Harvest.svg?react';
+import Irrigation from '../../../assets/images/task/Irrigation.svg?react';
+import Maintenance from '../../../assets/images/task/Maintenance.svg?react';
+import PestControl from '../../../assets/images/task/PestControl.svg?react';
+import Plant from '../../../assets/images/task/Plant.svg?react';
+import RecordSoilSample from '../../../assets/images/task/RecordSoilSample.svg?react';
+import Sales from '../../../assets/images/task/Sales.svg?react';
+import Scout from '../../../assets/images/task/Scout.svg?react';
+import SocialEvent from '../../../assets/images/task/SocialEvent.svg?react';
+import SoilAmendment from '../../../assets/images/task/SoilAmendment.svg?react';
+import Transplant from '../../../assets/images/task/Transplant.svg?react';
+import WashAndPack from '../../../assets/images/task/WashAndPack.svg?react';
+import CustomTask from '../../../assets/images/task/Custom.svg?react';
import { useForm } from 'react-hook-form';
import clsx from 'clsx';
import Button from '../../Form/Button';
diff --git a/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx b/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
index d13a75db78..d691a421fb 100644
--- a/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
+++ b/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
@@ -1,6 +1,6 @@
import { colors } from '../../../../assets/theme';
import styles from './styles.module.scss';
-import { ReactComponent as MapPin } from '../../../../assets/images/map/map_pin.svg';
+import MapPin from '../../../../assets/images/map/map_pin.svg?react';
import { Label } from '../../../Typography';
import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/Task/TaskReadOnly/index.jsx b/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
index 6f11da4a52..49c40eb987 100644
--- a/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
+++ b/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
@@ -46,7 +46,7 @@ import { isTaskType } from '../../../containers/Task/useIsTaskType';
import ReactSelect from '../../Form/ReactSelect';
import { BiPencil } from 'react-icons/bi';
import { FiAlertTriangle } from 'react-icons/fi';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
import TaskQuickAssignModal from '../../Modals/QuickAssignModal';
import { getDateInputFormat } from '../../../util/moment';
import UpdateTaskDateModal from '../../Modals/UpdateTaskDateModal';
diff --git a/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx b/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
index 7578f5568a..caf8fa5512 100644
--- a/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
+++ b/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
@@ -19,7 +19,7 @@ import clsx from 'clsx';
import { ClickAwayListener } from '@mui/material';
import styles from './styles.module.scss';
import { DashboardTile } from '../DashboardTile';
-import { ReactComponent as ChevronDown } from '../../../assets/images/animals/chevron-down.svg';
+import ChevronDown from '../../../assets/images/animals/chevron-down.svg?react';
import TextButton from '../../Form/Button/TextButton';
import { TypeCountTile, FilterId } from '..';
diff --git a/packages/webapp/src/components/Typography/index.tsx b/packages/webapp/src/components/Typography/index.tsx
index 95dc9f9393..fb4ec845a2 100644
--- a/packages/webapp/src/components/Typography/index.tsx
+++ b/packages/webapp/src/components/Typography/index.tsx
@@ -3,10 +3,10 @@ import styles from './typography.module.scss';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import Infoi from '../Tooltip/Infoi';
-import { ReactComponent as Leaf } from '../../assets/images/farmMapFilter/Leaf.svg';
-import { ReactComponent as Pencil } from '../../assets/images/managementPlans/pencil.svg';
+import Leaf from '../../assets/images/farmMapFilter/Leaf.svg?react';
+import Pencil from '../../assets/images/managementPlans/pencil.svg?react';
import { useTranslation } from 'react-i18next';
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link.svg?react';
type TypographyProps = {
style?: object;
diff --git a/packages/webapp/src/components/WelcomeScreen/index.jsx b/packages/webapp/src/components/WelcomeScreen/index.jsx
index 84f4d7819d..252c3eae95 100644
--- a/packages/webapp/src/components/WelcomeScreen/index.jsx
+++ b/packages/webapp/src/components/WelcomeScreen/index.jsx
@@ -1,9 +1,9 @@
import Layout from '../Layout';
import Button from '../Form/Button';
-import { ReactComponent as SignupEnglish } from '../../assets/images/signUp/signup_english.svg';
-import { ReactComponent as SignupSpanish } from '../../assets/images/signUp/signup_spanish.svg';
-import { ReactComponent as SignupPortuguese } from '../../assets/images/signUp/signup_portuguese.svg';
-import { ReactComponent as SignupFrench } from '../../assets/images/signUp/signup_french.svg';
+import SignupEnglish from '../../assets/images/signUp/signup_english.svg?react';
+import SignupSpanish from '../../assets/images/signUp/signup_spanish.svg?react';
+import SignupPortuguese from '../../assets/images/signUp/signup_portuguese.svg?react';
+import SignupFrench from '../../assets/images/signUp/signup_french.svg?react';
import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/util/getNotificationTypeIcon.js b/packages/webapp/src/components/util/getNotificationTypeIcon.js
index 9a43266552..bc125c94ff 100644
--- a/packages/webapp/src/components/util/getNotificationTypeIcon.js
+++ b/packages/webapp/src/components/util/getNotificationTypeIcon.js
@@ -13,7 +13,7 @@
* GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
*/
-import { ReactComponent as SensorIcon } from '../../assets/images/farmMapFilter/Sensor.svg';
+import SensorIcon from '../../assets/images/farmMapFilter/Sensor.svg?react';
/**
* Provides the appropriate icon for a specified notification type.
diff --git a/packages/webapp/src/components/util/getTaskTypeIcon.js b/packages/webapp/src/components/util/getTaskTypeIcon.js
index f52ca522a9..324ef98d13 100644
--- a/packages/webapp/src/components/util/getTaskTypeIcon.js
+++ b/packages/webapp/src/components/util/getTaskTypeIcon.js
@@ -1,18 +1,18 @@
-import { ReactComponent as CustomIcon } from '../../assets/images/task/Custom.svg';
-import { ReactComponent as RecordSoilSample } from '../../assets/images/task/RecordSoilSample.svg';
-import { ReactComponent as Sales } from '../../assets/images/task/Sales.svg';
-import { ReactComponent as Scout } from '../../assets/images/task/Scout.svg';
-import { ReactComponent as WashAndPack } from '../../assets/images/task/WashAndPack.svg';
-import { ReactComponent as Transplant } from '../../assets/images/task/Transplant.svg';
-import { ReactComponent as Harvest } from '../../assets/images/task/Harvest.svg';
-import { ReactComponent as PestControl } from '../../assets/images/task/PestControl.svg';
-import { ReactComponent as Irrigate } from '../../assets/images/task/Irrigate.svg';
-import { ReactComponent as Transport } from '../../assets/images/task/Transport.svg';
-import { ReactComponent as FieldWork } from '../../assets/images/task/FieldWork.svg';
-import { ReactComponent as Plant } from '../../assets/images/task/Plant.svg';
-import { ReactComponent as SocialEvent } from '../../assets/images/task/SocialEvent.svg';
-import { ReactComponent as Clean } from '../../assets/images/task/Clean.svg';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import CustomIcon from '../../assets/images/task/Custom.svg?react';
+import RecordSoilSample from '../../assets/images/task/RecordSoilSample.svg?react';
+import Sales from '../../assets/images/task/Sales.svg?react';
+import Scout from '../../assets/images/task/Scout.svg?react';
+import WashAndPack from '../../assets/images/task/WashAndPack.svg?react';
+import Transplant from '../../assets/images/task/Transplant.svg?react';
+import Harvest from '../../assets/images/task/Harvest.svg?react';
+import PestControl from '../../assets/images/task/PestControl.svg?react';
+import Irrigate from '../../assets/images/task/Irrigate.svg?react';
+import Transport from '../../assets/images/task/Transport.svg?react';
+import FieldWork from '../../assets/images/task/FieldWork.svg?react';
+import Plant from '../../assets/images/task/Plant.svg?react';
+import SocialEvent from '../../assets/images/task/SocialEvent.svg?react';
+import Clean from '../../assets/images/task/Clean.svg?react';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
/**
* Provides the appropriate icon for a specified task type.
diff --git a/packages/webapp/src/containers/AddFarm/index.jsx b/packages/webapp/src/containers/AddFarm/index.jsx
index d050f0d875..4ae89d5983 100644
--- a/packages/webapp/src/containers/AddFarm/index.jsx
+++ b/packages/webapp/src/containers/AddFarm/index.jsx
@@ -12,9 +12,9 @@ import {
import PureAddFarm from '../../components/AddFarm';
import { patchFarm, postFarm } from './saga';
-import { ReactComponent as MapPin } from '../../assets/images/signUp/map_pin.svg';
-import { ReactComponent as MapErrorPin } from '../../assets/images/signUp/map_error_pin.svg';
-import { ReactComponent as LoadingAnimation } from '../../assets/images/signUp/animated_loading_farm.svg';
+import MapPin from '../../assets/images/signUp/map_pin.svg?react';
+import MapErrorPin from '../../assets/images/signUp/map_error_pin.svg?react';
+import LoadingAnimation from '../../assets/images/signUp/animated_loading_farm.svg?react';
import { useTranslation } from 'react-i18next';
import { getLanguageFromLocalStorage } from '../../util/getLanguageFromLocalStorage';
import history from '../../history';
diff --git a/packages/webapp/src/containers/Animals/Groups/index.js b/packages/webapp/src/containers/Animals/Groups/index.js
new file mode 100644
index 0000000000..6ccc3aaf9a
--- /dev/null
+++ b/packages/webapp/src/containers/Animals/Groups/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2024 LiteFarm.org
+ * This file is part of LiteFarm.
+ *
+ * LiteFarm is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiteFarm is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+function AnimalGroups() {
+ return null;
+}
+
+export default AnimalGroups;
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 0d1029ab5d..8c931eba49 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -25,7 +25,7 @@ import { useMediaQuery } from '@mui/material';
import { AnimalData, AnimalBatchData, AnimalOrBatchData } from '../types';
import Cell from '../../../components/Table/Cell';
import { CellKind } from '../../../components/Table/types';
-import { ReactComponent as AnimalIcon } from '../../../assets/images/nav/animals.svg';
+import AnimalIcon from '../../../assets/images/nav/animals.svg?react';
function AnimalInventory() {
const { data: animals = [] } = useGetAnimalsQuery();
diff --git a/packages/webapp/src/containers/Animals/Location/index.js b/packages/webapp/src/containers/Animals/Location/index.js
new file mode 100644
index 0000000000..d980186fc4
--- /dev/null
+++ b/packages/webapp/src/containers/Animals/Location/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2024 LiteFarm.org
+ * This file is part of LiteFarm.
+ *
+ * LiteFarm is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiteFarm is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+function AnimalLocation() {
+ return null;
+}
+
+export default AnimalLocation;
diff --git a/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx b/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
index 415dc69cb5..8cab1d86da 100644
--- a/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
+++ b/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { showedSpotlightSelector } from '../../../showedSpotlightSlice';
import { setSpotlightToShown } from '../../../Map/saga';
import React from 'react';
-import { ReactComponent as PlantIcon } from '../../../../assets/images/managementPlans/plant.svg';
+import PlantIcon from '../../../../assets/images/managementPlans/plant.svg?react';
import { TourProviderWrapper } from '../../../../components/TourProviderWrapper/TourProviderWrapper';
export default function TransplantSpotlight({ is_seed }) {
@@ -26,23 +26,27 @@ export default function TransplantSpotlight({ is_seed }) {
// this is an unused variable, but it is required for the translation to work
const spotlightText = t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT');
- return <TourProviderWrapper
- steps={[
- {
- title: t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.TITLE.TEXT', { fill: titleFill }),
- contents: [
- <Trans i18nKey={'MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT'}>
- Please indicate where this crop will be initially
- <strong>{{ fill: bodyFill }}</strong>. We’ll ask about where you’ll transplant it
- to later.
- </Trans>,
- ],
- position: 'center',
- icon: <PlantIcon />,
- },
- ]}
- open={showSpotlight}
- onFinish={onFinish}
- />;
-
+ return (
+ <TourProviderWrapper
+ steps={[
+ {
+ title: t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.TITLE.TEXT', { fill: titleFill }),
+ contents: [
+ <Trans
+ i18nKey={'MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT'}
+ key="TransplantSpotlight"
+ >
+ Please indicate where this crop will be initially
+ <strong>{{ fill: bodyFill }}</strong>. We’ll ask about where you’ll transplant it to
+ later.
+ </Trans>,
+ ],
+ position: 'center',
+ icon: <PlantIcon />,
+ },
+ ]}
+ open={showSpotlight}
+ onFinish={onFinish}
+ />
+ );
}
diff --git a/packages/webapp/src/containers/Documents/DocumentTile/index.jsx b/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
index f958743fee..e63b611018 100644
--- a/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
+++ b/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import styles from './styles.module.scss';
import clsx from 'clsx';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../assets/images/managementPlans/calendar.svg?react';
import PropTypes from 'prop-types';
import { MediaWithAuthentication } from '../../../containers/MediaWithAuthentication';
import { mediaEnum } from '../../../containers/MediaWithAuthentication/constants';
diff --git a/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx b/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
index 2e0880aada..493eb9d2e8 100644
--- a/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
+++ b/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
@@ -17,10 +17,10 @@ import { useTranslation } from 'react-i18next';
import Layout from '../../../components/Layout';
import Button from '../../../components/Form/Button';
import PageTitle from '../../../components/PageTitle/v2';
-import { ReactComponent as DoesNotExistSplash } from '../../../assets/images/does-not-exist.svg';
+import DoesNotExistSplash from '../../../assets/images/does-not-exist.svg?react';
import { Title } from '../../../components/Typography';
import { makeStyles } from '@mui/styles';
-import { ReactComponent as Sunglasses } from '../../../assets/images/miscs/smiling-face-with-sunglasses-emoji.svg';
+import Sunglasses from '../../../assets/images/miscs/smiling-face-with-sunglasses-emoji.svg?react';
const useStyles = makeStyles((theme) => ({
line: {
diff --git a/packages/webapp/src/containers/Finances/AddSale/RevenueTypes/index.jsx b/packages/webapp/src/containers/Finances/AddSale/RevenueTypes/index.jsx
index 57810abdcd..6bff58ee28 100644
--- a/packages/webapp/src/containers/Finances/AddSale/RevenueTypes/index.jsx
+++ b/packages/webapp/src/containers/Finances/AddSale/RevenueTypes/index.jsx
@@ -15,8 +15,8 @@
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
-import { ReactComponent as CropSaleIcon } from '../../../../assets/images/finance/Crop-sale-icn.svg';
-import { ReactComponent as CustomTypeIcon } from '../../../../assets/images/finance/Custom-revenue.svg';
+import CropSaleIcon from '../../../../assets/images/finance/Crop-sale-icn.svg?react';
+import CustomTypeIcon from '../../../../assets/images/finance/Custom-revenue.svg?react';
import PureFinanceTypeSelection from '../../../../components/Finances/PureFinanceTypeSelection';
import { listItemTypes } from '../../../../components/List/constants';
import labelIconStyles from '../../../../components/Tile/styles.module.scss';
diff --git a/packages/webapp/src/containers/Finances/NewExpense/ExpenseCategories/index.jsx b/packages/webapp/src/containers/Finances/NewExpense/ExpenseCategories/index.jsx
index 71f1e34732..bb031c85fc 100644
--- a/packages/webapp/src/containers/Finances/NewExpense/ExpenseCategories/index.jsx
+++ b/packages/webapp/src/containers/Finances/NewExpense/ExpenseCategories/index.jsx
@@ -1,20 +1,20 @@
import React, { Component } from 'react';
import connect from 'react-redux/es/connect/connect';
import { expenseTypeTileContentsSelector, selectedExpenseSelector } from '../../selectors';
-import { ReactComponent as EquipIcon } from '../../../../assets/images/finance/Equipment-icn.svg';
-import { ReactComponent as SoilAmendmentIcon } from '../../../../assets/images/finance/Soil-amendment-icn.svg';
-import { ReactComponent as PestIcon } from '../../../../assets/images/finance/Pest-icn.svg';
-import { ReactComponent as FuelIcon } from '../../../../assets/images/finance/Fuel-icn.svg';
-import { ReactComponent as MachineIcon } from '../../../../assets/images/finance/Machinery-icn.svg';
-import { ReactComponent as SeedIcon } from '../../../../assets/images/finance/Seeds-icn.svg';
-import { ReactComponent as OtherIcon } from '../../../../assets/images/finance/Custom-expense.svg';
-import { ReactComponent as LandIcon } from '../../../../assets/images/finance/Land-icn.svg';
-import { ReactComponent as MiscellaneousIcon } from '../../../../assets/images/finance/Miscellaneous-icn.svg';
-import { ReactComponent as UtilitiesIcon } from '../../../../assets/images/finance/Utilities-icn.svg';
-import { ReactComponent as LabourIcon } from '../../../../assets/images/finance/Labour-icn.svg';
-import { ReactComponent as InfrastructureIcon } from '../../../../assets/images/finance/Infrastructure-icn.svg';
-import { ReactComponent as TransportationIcon } from '../../../../assets/images/finance/Transportation-icn.svg';
-import { ReactComponent as ServicesIcon } from '../../../../assets/images/finance/Services-icn.svg';
+import EquipIcon from '../../../../assets/images/finance/Equipment-icn.svg?react';
+import SoilAmendmentIcon from '../../../../assets/images/finance/Soil-amendment-icn.svg?react';
+import PestIcon from '../../../../assets/images/finance/Pest-icn.svg?react';
+import FuelIcon from '../../../../assets/images/finance/Fuel-icn.svg?react';
+import MachineIcon from '../../../../assets/images/finance/Machinery-icn.svg?react';
+import SeedIcon from '../../../../assets/images/finance/Seeds-icn.svg?react';
+import OtherIcon from '../../../../assets/images/finance/Custom-expense.svg?react';
+import LandIcon from '../../../../assets/images/finance/Land-icn.svg?react';
+import MiscellaneousIcon from '../../../../assets/images/finance/Miscellaneous-icn.svg?react';
+import UtilitiesIcon from '../../../../assets/images/finance/Utilities-icn.svg?react';
+import LabourIcon from '../../../../assets/images/finance/Labour-icn.svg?react';
+import InfrastructureIcon from '../../../../assets/images/finance/Infrastructure-icn.svg?react';
+import TransportationIcon from '../../../../assets/images/finance/Transportation-icn.svg?react';
+import ServicesIcon from '../../../../assets/images/finance/Services-icn.svg?react';
import { setSelectedExpenseTypes } from '../../actions';
import history from '../../../../history';
import { withTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/containers/Finances/Report/index.jsx b/packages/webapp/src/containers/Finances/Report/index.jsx
index ffc571e964..444017aeae 100644
--- a/packages/webapp/src/containers/Finances/Report/index.jsx
+++ b/packages/webapp/src/containers/Finances/Report/index.jsx
@@ -16,7 +16,7 @@
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
-import { ReactComponent as ReportIcon } from '../../../assets/images/finance/Report-icn.svg';
+import ReportIcon from '../../../assets/images/finance/Report-icn.svg?react';
import Drawer from '../../../components/Drawer';
import FinanceDateRangeSelector from '../../../components/Finances/DateRangeSelector';
import Button from '../../../components/Form/Button';
diff --git a/packages/webapp/src/containers/Insights/index.jsx b/packages/webapp/src/containers/Insights/index.jsx
index bc304e6d3a..b3a5cc2f21 100644
--- a/packages/webapp/src/containers/Insights/index.jsx
+++ b/packages/webapp/src/containers/Insights/index.jsx
@@ -19,10 +19,10 @@ import { useTranslation } from 'react-i18next';
import styles from './styles.module.scss';
import history from '../../history';
// images
-import soil_om from '../../assets/images/insights/soil_om.svg';
-import labour_happiness from '../../assets/images/insights/labour_happiness.svg';
-import biodiversity from '../../assets/images/insights/biodiversity.svg';
-import prices from '../../assets/images/insights/prices.svg';
+import SoilOm from '../../assets/images/insights/soil_om.svg?react';
+import LabourHappiness from '../../assets/images/insights/labour_happiness.svg?react';
+import Biodiversity from '../../assets/images/insights/biodiversity.svg?react';
+import Prices from '../../assets/images/insights/prices.svg?react';
// actions
import { getLabourHappinessData, getPricesWithDistanceData, getSoilOMData } from './actions';
@@ -53,25 +53,25 @@ const Insights = () => {
const items = [
{
label: t('INSIGHTS.SOIL_OM.TITLE'),
- image: soil_om,
+ image: (props) => <SoilOm {...props} />,
route: 'SoilOM',
data_point: 'SoilOM',
},
{
label: t('INSIGHTS.LABOUR_HAPPINESS.TITLE'),
- image: labour_happiness,
+ image: (props) => <LabourHappiness {...props} />,
route: 'LabourHappiness',
data_point: 'LabourHappiness',
},
{
label: t('INSIGHTS.BIODIVERSITY.TITLE'),
- image: biodiversity,
+ image: (props) => <Biodiversity {...props} />,
route: 'Biodiversity',
data_point: 'Biodiversity',
},
{
label: t('INSIGHTS.PRICES.TITLE'),
- image: prices,
+ image: (props) => <Prices {...props} />,
route: 'Prices',
data_point: 'Prices',
},
@@ -93,11 +93,7 @@ const Insights = () => {
className={`itemButton item-${index} ${styles.itemButton}`}
onClick={() => handleClick(item.route)}
>
- <img
- className={`itemIcon item-${index} ${styles.itemIcon}`}
- src={item.image}
- alt={item.label}
- />
+ <item.image className={`itemIcon item-${index} ${styles.itemIcon}`} alt={item.label} />
<div className={`itemText item-${index} ${styles.itemText}`}>
<Semibold>{item.label}</Semibold>
{item.label === t('INSIGHTS.BIODIVERSITY.TITLE') ? (
diff --git a/packages/webapp/src/containers/Map/useMapAssetRenderer.js b/packages/webapp/src/containers/Map/useMapAssetRenderer.js
index dada1e9b4c..59894f5c2b 100644
--- a/packages/webapp/src/containers/Map/useMapAssetRenderer.js
+++ b/packages/webapp/src/containers/Map/useMapAssetRenderer.js
@@ -34,7 +34,7 @@ import {
import useSelectionHandler from './useSelectionHandler';
import { useMaxZoom } from './useMaxZoom';
-import MapPin from '../../assets/images/map/map_pin.svg';
+import MapPin from '../../assets/images/map/map_pin.svg?react';
import { userFarmSelector } from '../userFarmSlice';
import CreateMarkerCluster from '../../components/Map/MarkerCluster';
import { usePropRef } from '../../components/LocationPicker/SingleLocationPicker/usePropRef';
@@ -124,8 +124,8 @@ const useMapAssetRenderer = ({ isClickable, showingConfirmButtons, drawingState
? drawNoFillArea
: drawArea
: isLine(assetType)
- ? drawLine
- : drawPoint;
+ ? drawLine
+ : drawPoint;
};
const { maxZoomRef } = useMaxZoom();
diff --git a/packages/webapp/src/containers/MediaWithAuthentication/index.jsx b/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
index 39cc69cd39..f94abadbf0 100644
--- a/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
+++ b/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Download } from '../../assets/images/farmMapFilter/Download.svg';
+import Download from '../../assets/images/farmMapFilter/Download.svg?react';
import useMediaWithAuthentication from '../hooks/useMediaWithAuthentication';
import { mediaEnum } from './constants';
diff --git a/packages/webapp/src/containers/SensorReadings/ForecastInfo.jsx b/packages/webapp/src/containers/SensorReadings/ForecastInfo.jsx
index 7e0d871f81..efd4b456ed 100644
--- a/packages/webapp/src/containers/SensorReadings/ForecastInfo.jsx
+++ b/packages/webapp/src/containers/SensorReadings/ForecastInfo.jsx
@@ -16,7 +16,7 @@ import { React } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './styles.module.scss';
import { getUnitOptionMap } from '../../util/convert-units/getUnitOptionMap';
-import { ReactComponent as Themometer } from '../../assets/images/map/themometer.svg';
+import Themometer from '../../assets/images/map/themometer.svg?react';
const ForecastInfo = ({ data }) => {
const { latestTemperatureReadings, stationName, unit } = data;
diff --git a/packages/webapp/src/hooks/useGetMenuItems.jsx b/packages/webapp/src/hooks/useGetMenuItems.jsx
index f4a4a4695c..7e65c6b233 100644
--- a/packages/webapp/src/hooks/useGetMenuItems.jsx
+++ b/packages/webapp/src/hooks/useGetMenuItems.jsx
@@ -13,16 +13,16 @@
* GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
*/
-import { ReactComponent as MapIcon } from '../assets/images/nav/map.svg';
-import { ReactComponent as TasksIcon } from '../assets/images/nav/tasks.svg';
-import { ReactComponent as CropsIcon } from '../assets/images/nav/crops.svg';
-import { ReactComponent as AnimalsIcon } from '../assets/images/nav/animals.svg';
-import { ReactComponent as FinancesIcon } from '../assets/images/nav/finances.svg';
-import { ReactComponent as InsightsIcon } from '../assets/images/nav/insights.svg';
-import { ReactComponent as DocumentsIcon } from '../assets/images/nav/documents.svg';
-import { ReactComponent as FarmSettingsIcon } from '../assets/images/nav/farmSettings.svg';
-import { ReactComponent as PeopleIcon } from '../assets/images/nav/people.svg';
-import { ReactComponent as CertificationsIcon } from '../assets/images/nav/certifications.svg';
+import MapIcon from '../assets/images/nav/map.svg?react';
+import TasksIcon from '../assets/images/nav/tasks.svg?react';
+import CropsIcon from '../assets/images/nav/crops.svg?react';
+import AnimalsIcon from '../assets/images/nav/animals.svg?react';
+import FinancesIcon from '../assets/images/nav/finances.svg?react';
+import InsightsIcon from '../assets/images/nav/insights.svg?react';
+import DocumentsIcon from '../assets/images/nav/documents.svg?react';
+import FarmSettingsIcon from '../assets/images/nav/farmSettings.svg?react';
+import PeopleIcon from '../assets/images/nav/people.svg?react';
+import CertificationsIcon from '../assets/images/nav/certifications.svg?react';
import { useTranslation } from 'react-i18next';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
diff --git a/packages/webapp/src/locales/i18n.js b/packages/webapp/src/locales/i18n.js
index 109ae73f2d..a5d3bd7140 100644
--- a/packages/webapp/src/locales/i18n.js
+++ b/packages/webapp/src/locales/i18n.js
@@ -1,11 +1,11 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector';
-import backend from 'i18next-xhr-backend';
+import HttpApi from 'i18next-http-backend';
import { APP_VERSION } from '../util/constants';
i18n
- .use(backend)
+ .use(HttpApi)
.use(initReactI18next)
.use(I18nextBrowserLanguageDetector)
.init({
diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index 363310b27f..cf70ea5a21 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -55,81 +55,83 @@ const Prices = React.lazy(() => import('../containers/Insights/Prices'));
const ExpiredTokenScreen = React.lazy(() => import('../containers/ExpiredTokenScreen'));
const Map = React.lazy(() => import('../containers/Map'));
const MapVideo = React.lazy(() => import('../components/Map/Videos'));
-const PostFarmSiteBoundaryForm = React.lazy(() =>
- import(
- '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
- ),
+const PostFarmSiteBoundaryForm = React.lazy(
+ () =>
+ import(
+ '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
+ ),
);
const FarmSiteBoundaryDetails = React.lazy(() => import('./FarmSiteBoundaryDetailsRoutes'));
-const PostFieldForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
+const PostFieldForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
);
const FieldDetails = React.lazy(() => import('./FieldDetailsRoutes'));
-const PostGardenForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
+const PostGardenForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
);
const GardenDetails = React.lazy(() => import('./GardenDetailsRoutes'));
-const PostGateForm = React.lazy(() =>
- import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
+const PostGateForm = React.lazy(
+ () => import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
);
const GateDetails = React.lazy(() => import('./GateDetailsRoutes'));
-const PostWaterValveForm = React.lazy(() =>
- import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
+const PostWaterValveForm = React.lazy(
+ () => import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
);
const WaterValveDetails = React.lazy(() => import('./WaterValveDetailsRoutes'));
-const EditSensor = React.lazy(() =>
- import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
+const EditSensor = React.lazy(
+ () => import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
);
-const PostBarnForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
+const PostBarnForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
);
const BarnDetails = React.lazy(() => import('./BarnDetailsRoutes'));
-const PostNaturalAreaForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
+const PostNaturalAreaForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
);
const NaturalAreaDetails = React.lazy(() => import('./NaturalAreaDetailsRoutes'));
-const PostSurfaceWaterForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
+const PostSurfaceWaterForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
);
const SurfaceWaterDetails = React.lazy(() => import('./SurfaceWaterDetailsRoutes'));
-const PostResidenceForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
+const PostResidenceForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
);
const ResidenceDetails = React.lazy(() => import('./ResidenceDetailsRoutes'));
-const PostCeremonialForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
+const PostCeremonialForm = React.lazy(
+ () =>
+ import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
);
const CeremonialAreaDetails = React.lazy(() => import('./CeremonialAreaDetailsRoutes'));
-const PostGreenhouseForm = React.lazy(() =>
- import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
+const PostGreenhouseForm = React.lazy(
+ () => import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
);
const GreenhouseDetails = React.lazy(() => import('./GreenhouseDetailsRoutes'));
const CropManagement = React.lazy(() => import('../containers/Crop/CropManagement'));
const CropDetail = React.lazy(() => import('../containers/Crop/CropDetail/index'));
-const PostFenceForm = React.lazy(() =>
- import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
+const PostFenceForm = React.lazy(
+ () => import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
);
const FenceDetails = React.lazy(() => import('./FenceDetailsRoutes'));
-const PostBufferZoneForm = React.lazy(() =>
- import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
+const PostBufferZoneForm = React.lazy(
+ () => import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
);
const BufferZoneDetails = React.lazy(() => import('./BufferZoneDetailsRoutes'));
-const PostWatercourseForm = React.lazy(() =>
- import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
+const PostWatercourseForm = React.lazy(
+ () => import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
);
const WatercourseDetails = React.lazy(() => import('./WatercourseDetailsRoutes'));
const SensorDetails = React.lazy(() => import('./SensorDetailsRoutes'));
@@ -140,34 +142,34 @@ const AddCrop = React.lazy(() => import('../containers/AddCropVariety/AddCropVar
const EditCrop = React.lazy(() => import('../containers/EditCropVariety'));
const ComplianceInfo = React.lazy(() => import('../containers/AddCropVariety/ComplianceInfo'));
const AddNewCrop = React.lazy(() => import('../containers/AddNewCrop'));
-const PlantingLocation = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/PlantingLocation'),
+const PlantingLocation = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/PlantingLocation'),
);
const Transplant = React.lazy(() => import('../containers/Crop/AddManagementPlan/Transplant'));
const PlantingDate = React.lazy(() => import('../containers/Crop/AddManagementPlan/PlantingDate'));
-const PlantingMethod = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/PlantingMethod'),
+const PlantingMethod = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/PlantingMethod'),
);
-const PlantInContainer = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/PlantInContainer'),
+const PlantInContainer = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/PlantInContainer'),
);
-const PlantBroadcast = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
+const PlantBroadcast = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
);
const BedPlan = React.lazy(() => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlan'));
-const BedPlanGuidance = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
+const BedPlanGuidance = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
);
-const ManagementPlanName = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
+const ManagementPlanName = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
);
const RowMethod = React.lazy(() => import('../containers/Crop/AddManagementPlan/RowMethod'));
-const RowMethodGuidance = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
+const RowMethodGuidance = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
);
-const PlantedAlready = React.lazy(() =>
- import('../containers/Crop/AddManagementPlan/PlantedAlready'),
+const PlantedAlready = React.lazy(
+ () => import('../containers/Crop/AddManagementPlan/PlantedAlready'),
);
const Documents = React.lazy(() => import('../containers/Documents'));
@@ -176,60 +178,63 @@ const EditDocument = React.lazy(() => import('../containers/Documents/Edit'));
const AddDocument = React.lazy(() => import('../containers/Documents/Add'));
const MainDocument = React.lazy(() => import('../containers/Documents/Main'));
-const CertificationReportingPeriod = React.lazy(() =>
- import('../containers/Certifications/ReportingPeriod'),
+const CertificationReportingPeriod = React.lazy(
+ () => import('../containers/Certifications/ReportingPeriod'),
);
const CertificationSurvey = React.lazy(() => import('../containers/Certifications/Survey'));
-const InterestedOrganic = React.lazy(() =>
- import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
+const InterestedOrganic = React.lazy(
+ () => import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
);
-const CertificationSelection = React.lazy(() =>
- import(
- '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
- ),
+const CertificationSelection = React.lazy(
+ () =>
+ import(
+ '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
+ ),
);
-const CertifierSelectionMenu = React.lazy(() =>
- import(
- '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
- ),
+const CertifierSelectionMenu = React.lazy(
+ () =>
+ import(
+ '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
+ ),
);
-const SetCertificationSummary = React.lazy(() =>
- import(
- '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
- ),
+const SetCertificationSummary = React.lazy(
+ () =>
+ import(
+ '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
+ ),
);
-const RequestCertifier = React.lazy(() =>
- import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
+const RequestCertifier = React.lazy(
+ () => import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
);
-const ViewCertification = React.lazy(() =>
- import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
+const ViewCertification = React.lazy(
+ () => import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
);
const RenderSurvey = React.lazy(() => import('../containers/RenderSurvey/RenderSurvey'));
const ExportDownload = React.lazy(() => import('../containers/ExportDownload'));
-const ManagementTasks = React.lazy(() =>
- import('../containers/Crop/ManagementDetail/ManagementTasks'),
+const ManagementTasks = React.lazy(
+ () => import('../containers/Crop/ManagementDetail/ManagementTasks'),
);
-const ManagementDetails = React.lazy(() =>
- import('../containers/Crop/ManagementDetail/ManagementDetails'),
+const ManagementDetails = React.lazy(
+ () => import('../containers/Crop/ManagementDetail/ManagementDetails'),
);
-const EditManagementDetails = React.lazy(() =>
- import('../containers/Crop/ManagementDetail/EditManagementDetails'),
+const EditManagementDetails = React.lazy(
+ () => import('../containers/Crop/ManagementDetail/EditManagementDetails'),
);
-const CompleteManagementPlan = React.lazy(() =>
- import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
+const CompleteManagementPlan = React.lazy(
+ () => import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
);
-const AbandonManagementPlan = React.lazy(() =>
- import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
+const AbandonManagementPlan = React.lazy(
+ () => import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
);
const RepeatCropPlan = React.lazy(() => import('../containers/Crop/RepeatCropPlan'));
-const RepeatCropPlanConfirmation = React.lazy(() =>
- import('../containers/Crop/RepeatCropPlan/Confirmation'),
+const RepeatCropPlanConfirmation = React.lazy(
+ () => import('../containers/Crop/RepeatCropPlan/Confirmation'),
);
const TaskAssignment = React.lazy(() => import('../containers/Task/TaskAssignment'));
@@ -242,41 +247,41 @@ const Tasks = React.lazy(() => import('../containers/Task'));
const ManageCustomTasks = React.lazy(() => import('../containers/Task/ManageCustomTasks'));
const AddCustomTask = React.lazy(() => import('../containers/Task/AddCustomTask'));
const TaskComplete = React.lazy(() => import('../containers/Task/TaskComplete'));
-const HarvestCompleteQuantity = React.lazy(() =>
- import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
+const HarvestCompleteQuantity = React.lazy(
+ () => import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
);
-const HarvestUses = React.lazy(() =>
- import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
+const HarvestUses = React.lazy(
+ () => import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
);
const TaskCompleteStepOne = React.lazy(() => import('../containers/Task/TaskComplete/StepOne'));
const TaskReadOnly = React.lazy(() => import('../containers/Task/TaskReadOnly'));
const EditCustomTask = React.lazy(() => import('../containers/Task/EditCustomTask'));
const TaskAbandon = React.lazy(() => import('../containers/Task/TaskAbandon'));
const EditCustomTaskUpdate = React.lazy(() => import('../containers/Task/EditCustomTaskUpdate'));
-const TaskTransplantMethod = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
+const TaskTransplantMethod = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
);
-const TaskBedMethod = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
+const TaskBedMethod = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
);
-const TaskBedGuidance = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
+const TaskBedGuidance = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
);
-const TaskRowMethod = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
+const TaskRowMethod = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
);
-const TaskRowGuidance = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
+const TaskRowGuidance = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
);
-const TaskContainerMethod = React.lazy(() =>
- import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
+const TaskContainerMethod = React.lazy(
+ () => import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
);
const Notification = React.lazy(() => import('../containers/Notification'));
-const NotificationReadOnly = React.lazy(() =>
- import('../containers/Notification/NotificationReadOnly'),
+const NotificationReadOnly = React.lazy(
+ () => import('../containers/Notification/NotificationReadOnly'),
);
-const UnknownRecord = React.lazy(() =>
- import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
+const UnknownRecord = React.lazy(
+ () => import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
);
const Routes = ({ isCompactSideMenu }) => {
diff --git a/packages/webapp/src/stories/CardsCarrousel/CardsCarrousel.stories.jsx b/packages/webapp/src/stories/CardsCarrousel/CardsCarrousel.stories.jsx
index b498bc8077..b8a13c4397 100644
--- a/packages/webapp/src/stories/CardsCarrousel/CardsCarrousel.stories.jsx
+++ b/packages/webapp/src/stories/CardsCarrousel/CardsCarrousel.stories.jsx
@@ -17,9 +17,9 @@ import { expect } from '@storybook/jest';
import { within, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
import CardsCarrousel from '../../components/CardsCarrousel';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as LabourIcon } from '../../assets/images/finance/Labour-icn.svg';
-import { ReactComponent as SeedsIcon } from '../../assets/images/finance/Seeds-icn.svg';
-import { ReactComponent as UtilitesIcon } from '../../assets/images/finance/Utilities-icn.svg';
+import LabourIcon from '../../assets/images/finance/Labour-icn.svg?react';
+import SeedsIcon from '../../assets/images/finance/Seeds-icn.svg?react';
+import UtilitesIcon from '../../assets/images/finance/Utilities-icn.svg?react';
export default {
title: 'Components/CardsCarrousel',
diff --git a/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx b/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
index 3a178ac393..8bcbe818db 100644
--- a/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
+++ b/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { ContainerWithIcon } from '../../components/ContainerWithIcon/ContainerWithIcon';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as TrashIcon } from '../../assets/images/document/trash.svg';
+import TrashIcon from '../../assets/images/document/trash.svg?react';
export default {
title: 'Components/ContainerWithIcon',
diff --git a/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx b/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
index 8dadecd212..1dd0bd668b 100644
--- a/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
+++ b/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
@@ -20,7 +20,7 @@ import Expandable from '../../components/Expandable/ExpandableItem';
import useExpandable from '../../components/Expandable/useExpandableItem';
import TransactionItem from '../../components/Finances/Transaction/Mobile/Item';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
import styles from '../../components/Finances/Transaction/Mobile/styles.module.scss';
export default {
diff --git a/packages/webapp/src/stories/List/IconDescriptionCheckboxListItem.stories.jsx b/packages/webapp/src/stories/List/IconDescriptionCheckboxListItem.stories.jsx
index 54697ec151..f8432a2850 100644
--- a/packages/webapp/src/stories/List/IconDescriptionCheckboxListItem.stories.jsx
+++ b/packages/webapp/src/stories/List/IconDescriptionCheckboxListItem.stories.jsx
@@ -15,7 +15,7 @@
import React from 'react';
import IconDescriptionListItem from '../../components/List/ListItems/IconDescription/IconDescriptionListItem';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
export default {
title: 'Components/List/IconDescriptionCheckboxListItem',
diff --git a/packages/webapp/src/stories/List/IconDescriptionChevronListItem.stories.jsx b/packages/webapp/src/stories/List/IconDescriptionChevronListItem.stories.jsx
index 8ca9a5222a..c17ba5f9df 100644
--- a/packages/webapp/src/stories/List/IconDescriptionChevronListItem.stories.jsx
+++ b/packages/webapp/src/stories/List/IconDescriptionChevronListItem.stories.jsx
@@ -15,7 +15,7 @@
import React from 'react';
import IconDescriptionListItem from '../../components/List/ListItems/IconDescription/IconDescriptionListItem';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
export default {
title: 'Components/List/IconDescriptionChevronListItem',
diff --git a/packages/webapp/src/stories/List/IconDescriptionListItem.stories.jsx b/packages/webapp/src/stories/List/IconDescriptionListItem.stories.jsx
index 830d830852..666f4f3feb 100644
--- a/packages/webapp/src/stories/List/IconDescriptionListItem.stories.jsx
+++ b/packages/webapp/src/stories/List/IconDescriptionListItem.stories.jsx
@@ -15,7 +15,7 @@
import React from 'react';
import IconDescriptionListItem from '../../components/List/ListItems/IconDescription/IconDescriptionListItem';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
export default {
title: 'Components/List/IconDescriptionListItem',
diff --git a/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx b/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
index cc0fea8059..f0f8ba094e 100644
--- a/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
+++ b/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
@@ -5,7 +5,7 @@ import { Label } from '../../components/Typography';
import Button from '../../components/Form/Button';
import { chromaticSmallScreen } from '../Pages/config/chromatic';
import styles from '../../components/Modals/CancelFlowModal/styles.module.scss';
-import { ReactComponent as Email } from '../../assets/images/export/email/Email.svg';
+import Email from '../../assets/images/export/email/Email.svg?react';
export default {
title: 'Components/Modals/ModalComponentV2',
diff --git a/packages/webapp/src/stories/Pages/Forms/ManageCustomTypes.stories.jsx b/packages/webapp/src/stories/Pages/Forms/ManageCustomTypes.stories.jsx
index cd9ca1879d..647cc652ec 100644
--- a/packages/webapp/src/stories/Pages/Forms/ManageCustomTypes.stories.jsx
+++ b/packages/webapp/src/stories/Pages/Forms/ManageCustomTypes.stories.jsx
@@ -15,7 +15,7 @@
import decorators from '../config/Decorators';
import { chromaticSmallScreen } from '../config/chromatic';
import ManageCustomTypes from '../../../components/Forms/ManageCustomTypes';
-import { ReactComponent as OtherIcon } from '../../../assets/images/finance/Custom-expense.svg';
+import OtherIcon from '../../../assets/images/finance/Custom-expense.svg?react';
export default {
title: 'Form/ManageCustomTypes',
diff --git a/packages/webapp/src/stories/Pages/Intro/IntroLayout.stories.jsx b/packages/webapp/src/stories/Pages/Intro/IntroLayout.stories.jsx
index e208afd9f7..366b0b164f 100644
--- a/packages/webapp/src/stories/Pages/Intro/IntroLayout.stories.jsx
+++ b/packages/webapp/src/stories/Pages/Intro/IntroLayout.stories.jsx
@@ -1,8 +1,7 @@
import React from 'react';
import Layout from '../../../components/Layout';
import Button from '../../../components/Form/Button';
-import Svg from '../../../components/Svg';
-import signup2 from '../../../assets/images/signUp/signUp2.svg';
+import Signup2 from '../../../assets/images/signUp/signUp2.svg?react';
import decorators from '../config/Decorators';
export default {
@@ -21,7 +20,7 @@ Primary.args = {
export const SVG = Template.bind({});
SVG.args = {
buttonGroup: <Button fullLength />,
- children: <Svg svg={signup2} alt={'Welcome to LiteFarm'} />,
+ children: <Signup2 alt={'Welcome to LiteFarm'} />,
isSVG: true,
};
diff --git a/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx b/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
index f6b12db2b1..03a3008770 100644
--- a/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
+++ b/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { componentDecoratorsGreyBackground } from '../../config/Decorators';
import MapDrawerMenuItem from '../../../../components/MapDrawer/MapDrawerMenuItem';
-import { ReactComponent as MapBackground } from '../../../../assets/images/farmMapFilter/MapBackground.svg';
+import MapBackground from '../../../../assets/images/farmMapFilter/MapBackground.svg?react';
export default {
title: 'Components/Map/MapDrawerMenuItem',
diff --git a/packages/webapp/src/stories/Table/TableCells.stories.jsx b/packages/webapp/src/stories/Table/TableCells.stories.jsx
index 732c55f1fe..82fa6638ce 100644
--- a/packages/webapp/src/stories/Table/TableCells.stories.jsx
+++ b/packages/webapp/src/stories/Table/TableCells.stories.jsx
@@ -16,7 +16,7 @@ import React from 'react';
import { v2TableDecorator } from '../Pages/config/Decorators';
import Table from '../../components/Table';
import Cell from '../../components/Table/Cell';
-import { ReactComponent as CropIcon } from '../../assets/images/nav/crops.svg';
+import CropIcon from '../../assets/images/nav/crops.svg?react';
import { TableKind, CellKind } from '../../components/Table/types';
export default {
diff --git a/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx b/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
index 6ce198273a..fc27446959 100644
--- a/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
+++ b/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
@@ -15,7 +15,7 @@
import React from 'react';
import IconLabelTile from '../../components/Tile/IconLabelTile';
import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
export default {
title: 'Components/Tile/IconLabelTile',
diff --git a/packages/webapp/src/stories/Tile/Tiles.stories.jsx b/packages/webapp/src/stories/Tile/Tiles.stories.jsx
index d3662c60ff..33589642d6 100644
--- a/packages/webapp/src/stories/Tile/Tiles.stories.jsx
+++ b/packages/webapp/src/stories/Tile/Tiles.stories.jsx
@@ -19,7 +19,7 @@ import { componentDecorators } from '../Pages/config/Decorators';
import Tiles from '../../components/Tile/Tiles';
import IconLabelTile from '../../components/Tile/IconLabelTile';
import { tileTypes } from '../../components/Tile/constants';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
export default {
title: 'Components/Tile/Tiles',
diff --git a/packages/webapp/src/stories/TileDashboard/mockTiles.tsx b/packages/webapp/src/stories/TileDashboard/mockTiles.tsx
index f51fdf085b..8d167785e5 100644
--- a/packages/webapp/src/stories/TileDashboard/mockTiles.tsx
+++ b/packages/webapp/src/stories/TileDashboard/mockTiles.tsx
@@ -13,13 +13,13 @@
* GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
*/
-import { ReactComponent as AlpacaIcon } from '../../assets/images/animals/alpaca-icon.svg';
-import { ReactComponent as CattleIcon } from '../../assets/images/animals/cattle-icon.svg';
-import { ReactComponent as ChickenIcon } from '../../assets/images/animals/chicken-icon.svg';
-import { ReactComponent as GoatIcon } from '../../assets/images/animals/goat-icon.svg';
-import { ReactComponent as PigIcon } from '../../assets/images/animals/pig-icon.svg';
-import { ReactComponent as RabbitIcon } from '../../assets/images/animals/rabbit-icon.svg';
-import { ReactComponent as SheepIcon } from '../../assets/images/animals/sheep-icon.svg';
+import AlpacaIcon from '../../assets/images/animals/alpaca-icon.svg?react';
+import CattleIcon from '../../assets/images/animals/cattle-icon.svg?react';
+import ChickenIcon from '../../assets/images/animals/chicken-icon.svg?react';
+import GoatIcon from '../../assets/images/animals/goat-icon.svg?react';
+import PigIcon from '../../assets/images/animals/pig-icon.svg?react';
+import RabbitIcon from '../../assets/images/animals/rabbit-icon.svg?react';
+import SheepIcon from '../../assets/images/animals/sheep-icon.svg?react';
export const mockTiles = [
{
diff --git a/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx b/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
index 2ef2edbeee..c802f75859 100644
--- a/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
+++ b/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
@@ -16,7 +16,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { componentDecorators } from '../../Pages/config/Decorators';
import { DashboardTile } from '../../../components/TileDashboard/DashboardTile';
-import { ReactComponent as CattleIcon } from '../../../assets/images/animals/cattle-icon.svg';
+import CattleIcon from '../../../assets/images/animals/cattle-icon.svg?react';
// https://storybook.js.org/docs/writing-stories/typescript
const meta: Meta<typeof DashboardTile> = {
diff --git a/packages/webapp/src/vite-env.d.ts b/packages/webapp/src/vite-env.d.ts
index 11f02fe2a0..ed791b90b3 100644
--- a/packages/webapp/src/vite-env.d.ts
+++ b/packages/webapp/src/vite-env.d.ts
@@ -1 +1,3 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vitest/globals" />
/// <reference types="vite/client" />
diff --git a/packages/webapp/tsconfig.json b/packages/webapp/tsconfig.json
index cf8539aca1..eee48ff57d 100644
--- a/packages/webapp/tsconfig.json
+++ b/packages/webapp/tsconfig.json
@@ -16,8 +16,13 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
- "types": ["vite/client", "vite-plugin-svgr/client", "@emotion/react/types/css-prop"]
+ "types": [
+ "vite/client",
+ "vitest/globals",
+ "vite-plugin-svgr/client",
+ "@emotion/react/types/css-prop",
+ ],
},
"include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }]
+ "references": [{ "path": "./tsconfig.node.json" }],
}
diff --git a/packages/webapp/vite.config.ts b/packages/webapp/vite.config.ts
index 3d3915b164..d2e8414a5e 100644
--- a/packages/webapp/vite.config.ts
+++ b/packages/webapp/vite.config.ts
@@ -1,13 +1,16 @@
+import { defineConfig } from 'vite';
import mdx from '@mdx-js/rollup';
import react from '@vitejs/plugin-react';
import path from 'path';
-import { defineConfig } from 'vite';
-import IstanbulPlugin from 'vite-plugin-istanbul';
+import istanbul from 'vite-plugin-istanbul';
import { VitePWA } from 'vite-plugin-pwa';
-import svgrPlugin from 'vite-plugin-svgr';
+import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
+ optimizeDeps: {
+ include: ['@mui/material/Tooltip'],
+ },
plugins: [
{ enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
react({
@@ -16,12 +19,13 @@ export default defineConfig({
plugins: ['@emotion/babel-plugin'],
},
}),
- svgrPlugin({
+ svgr({
svgrOptions: {
icon: false,
},
+ include: '**/*.svg?react',
}),
- IstanbulPlugin({
+ istanbul({
include: 'src/*',
exclude: ['node_modules', 'tests/'],
extension: ['.js', '.ts', '.jsx'],
+