diff --git a/src/assets/icons/tabbar/conso/off.svg b/src/assets/icons/tabbar/conso/conso-off.svg
similarity index 100%
rename from src/assets/icons/tabbar/conso/off.svg
rename to src/assets/icons/tabbar/conso/conso-off.svg
diff --git a/src/assets/icons/tabbar/conso/on.svg b/src/assets/icons/tabbar/conso/conso-on.svg
similarity index 100%
rename from src/assets/icons/tabbar/conso/on.svg
rename to src/assets/icons/tabbar/conso/conso-on.svg
diff --git a/src/assets/icons/tabbar/defi/off.svg b/src/assets/icons/tabbar/defi/defi-off.svg
similarity index 100%
rename from src/assets/icons/tabbar/defi/off.svg
rename to src/assets/icons/tabbar/defi/defi-off.svg
diff --git a/src/assets/icons/tabbar/defi/on.svg b/src/assets/icons/tabbar/defi/defi-on.svg
similarity index 100%
rename from src/assets/icons/tabbar/defi/on.svg
rename to src/assets/icons/tabbar/defi/defi-on.svg
diff --git a/src/assets/icons/tabbar/defi/off-notif.svg b/src/assets/icons/tabbar/defi/off-notif.svg
deleted file mode 100644
index c4f4f42c5dc44cc279967480164b685a82e67efc..0000000000000000000000000000000000000000
--- a/src/assets/icons/tabbar/defi/off-notif.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="50" height="36" viewBox="0 0 50 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.0352 10.1551L24.5 9.80511L23.9527 10.1631C21.8729 11.5233 19.6608 12.3222 17.1758 12.4368L16.2772 12.4783L16.2236 13.3762C16.2058 13.6743 16.1874 13.9705 16.1691 14.2647L16.1691 14.2647C15.9702 17.4643 15.7863 20.4211 16.6118 22.9662C17.5579 25.8831 19.7604 28.1383 24.1208 29.9253L24.5 30.0807L24.8793 29.9253C29.2396 28.1383 31.4422 25.8831 32.3883 22.9662C32.6159 22.2645 32.7667 21.5316 32.8617 20.7709C32.5306 20.6987 32.2056 20.6102 31.8876 20.5062C31.4776 24.0783 29.7971 26.8291 24.5 29C16.4666 25.7077 16.7515 21.0816 17.1704 14.2794C17.1875 14.0018 17.2049 13.7206 17.2218 13.4358C19.9078 13.3119 22.2906 12.4449 24.5 11C24.6673 11.1094 24.8356 11.2155 25.005 11.3182C25.0017 11.2125 25 11.1065 25 11C25 10.7154 25.0119 10.4336 25.0352 10.1551Z" fill="#A0A0A0"/>
-<circle cx="35" cy="11" r="9" fill="#58FFFF"/>
-<circle cx="35" cy="11" r="9" fill="url(#paint0_radial)" fill-opacity="0.5"/>
-<defs>
-<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(34.9419 14.75) rotate(-90) scale(11.625 18.945)">
-<stop stop-color="#0199A3"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/tabbar/parametre/off.svg b/src/assets/icons/tabbar/parametre/parametre-off.svg
similarity index 100%
rename from src/assets/icons/tabbar/parametre/off.svg
rename to src/assets/icons/tabbar/parametre/parametre-off.svg
diff --git a/src/assets/icons/tabbar/parametre/on.svg b/src/assets/icons/tabbar/parametre/parametre-on.svg
similarity index 100%
rename from src/assets/icons/tabbar/parametre/on.svg
rename to src/assets/icons/tabbar/parametre/parametre-on.svg
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
index aa9228ba206e656f3a057a6796c0a8acdc5c61fa..9deb63a3160be0686216c22606e6a92b7e4c0991 100644
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ b/src/components/CommonKit/Card/StyledIconCard.tsx
@@ -6,8 +6,8 @@ import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
import { FluidType } from 'enum/fluid.enum'
import { getPicto } from 'utils/utils'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import Grid from '@material-ui/core/Grid'
+import StyledIcon from '../Icon/StyledIcon'
const CardBase = withStyles({
root: {
@@ -65,7 +65,7 @@ const GenerateContentCard = (
justify="center"
>
<Grid item>
- <Icon icon={icon} size={64} />
+ <StyledIcon icon={icon} size={64} />
</Grid>
<Grid item>{children}</Grid>
</Grid>
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index d543c44124011a1574d9e61e6c32b3b830df921e..2b6dd0e7dbb6c0f5b44577d53977fe06ed3c6de6 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import { createAlt } from 'utils/utils'
interface StyledIconProps {
className?: string
@@ -12,7 +13,16 @@ const StyledIcon: React.ComponentType<StyledIconProps> = ({
icon,
size = 16,
}: StyledIconProps) => {
- return <Icon className={className} icon={icon} size={size} />
+ return (
+ <img
+ className={className}
+ src={icon}
+ alt={createAlt(icon)}
+ width={size}
+ height={size}
+ />
+ )
+ // return <Icon className={className} icon={icon} size={size} />
}
export default StyledIcon
diff --git a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
index 1c77341c62fbc2dd82115decb254fa9d6f3d52c9..bb35c720a467cbf51530e8d5bee4c0173dc06c5f 100644
--- a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import def from 'assets/icons/visu/ecogesture/default.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface EcogestureCardProps {
ecogesture: EcogestureType
@@ -50,7 +50,11 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
<div className="ec">
<div className="ec-content ec-content-challenge">
<div>
- <Icon className="Icon" icon={ecogestureIcon} size={64} />
+ <StyledIcon
+ className="Icon"
+ icon={ecogestureIcon}
+ size={64}
+ />
</div>
<div className="ec-content-challenge-text">
{ecogesture.shortName}
@@ -72,7 +76,11 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
>
<div className="ec-content-icon">
{ecogesture.unlocked && (
- <Icon className="Icon" icon={ecogestureIcon} size={50} />
+ <StyledIcon
+ className="Icon"
+ icon={ecogestureIcon}
+ size={50}
+ />
)}
</div>
<div className="ec-content-short-name text-16-bold">
diff --git a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
index b4514af9f2321b858e8082f333f34d8bc01e1044..a80f42e5ebf424bea1cb4c1b42ed243f473696f6 100644
--- a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
@@ -60,7 +60,11 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-content-box-img">
{(ecogesture.unlocked || unlockedEcogesture) &&
ecogestureIcon && (
- <Icon className="icon" icon={ecogestureIcon} size={140} />
+ <StyledIcon
+ className="icon"
+ icon={ecogestureIcon}
+ size={140}
+ />
)}
</div>
<div className="em-title text-24-bold ">
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index fdd9bb3f099480acfe39c5148b9a9f125035507c..b696f637af32856ab2d571ee5b1d4b228038fbee 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -4,14 +4,14 @@ import { translate } from 'cozy-ui/react/I18n'
import { NavLink } from 'react-router-dom'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import ConsoIconOff from 'assets/icons/tabbar/conso/off.svg'
-import ChallengeIconOn from 'assets/icons/tabbar/defi/on.svg'
-import ChallengeIconOff from 'assets/icons/tabbar/defi/off.svg'
-import ChallengeIconOffNotif from 'assets/icons/tabbar/defi/off-notif.svg'
-import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg'
-import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg'
-import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg'
+import ConsoIconOn from 'assets/icons/tabbar/conso/conso-on.svg'
+import ConsoIconOff from 'assets/icons/tabbar/conso/conso-off.svg'
+import ChallengeIconOn from 'assets/icons/tabbar/defi/defi-on.svg'
+import ChallengeIconOff from 'assets/icons/tabbar/defi/defi-off.svg'
+import ParameterIconOn from 'assets/icons/tabbar/parametre/parametre-on.svg'
+import ParameterIconOff from 'assets/icons/tabbar/parametre/parametre-off.svg'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface NavbarProps {
t: Function
@@ -29,8 +29,8 @@ export const Navbar = ({ t }: NavbarProps) => {
className="c-nav-link"
activeClassName="is-active"
>
- <Icon className="c-nav-icon off" icon={ConsoIconOff} />
- <Icon className="c-nav-icon on" icon={ConsoIconOn} />
+ <StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
+ <StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
{t('Nav.consumption')}
</NavLink>
</li>
@@ -43,8 +43,8 @@ export const Navbar = ({ t }: NavbarProps) => {
{challengeNotification && (
<div className="nb-challenge-notif">1</div>
)}
- <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
- <Icon className="c-nav-icon on" icon={ChallengeIconOn} />
+ <StyledIcon className="c-nav-icon off" icon={ChallengeIconOff} />
+ <StyledIcon className="c-nav-icon on" icon={ChallengeIconOn} />
{t('Nav.challenges')}
</NavLink>
</li>
@@ -55,14 +55,14 @@ export const Navbar = ({ t }: NavbarProps) => {
className="c-nav-link"
activeClassName="is-active"
>
- <Icon className="c-nav-icon off" icon={ParameterIconOff} />
- <Icon className="c-nav-icon on" icon={ParameterIconOn} />
+ <StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
+ <StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
{t('Nav.parameters')}
</NavLink>
</li>
</ul>
</nav>
- <Icon className="logo-grand-lyon" icon={logoGrandLyon} size={100} />
+ <StyledIcon className="logo-grand-lyon" icon={logoGrandLyon} size={100} />
</aside>
)
}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index befddaeb59d4853e54140fc792277f01e929dee6..8abaa689936af75aea94cfa513f8c629552677d4 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -179,3 +179,8 @@ export const convertDateByTimeStep = (
return ''
}
}
+
+export const createAlt = (path: string) => {
+ const arr = path.split('/')
+ return arr[arr.length - 1].split('.')[0]
+}