From 57b0d1132380e5ee342260ec1ff79ac085f7c5d7 Mon Sep 17 00:00:00 2001 From: CREY Romain <romain.crey@emea.msad.sopra> Date: Wed, 29 Jul 2020 16:33:21 +0200 Subject: [PATCH] change method for SVG --- .../tabbar/conso/{off.svg => conso-off.svg} | 0 .../tabbar/conso/{on.svg => conso-on.svg} | 0 .../tabbar/defi/{off.svg => defi-off.svg} | 0 .../icons/tabbar/defi/{on.svg => defi-on.svg} | 0 src/assets/icons/tabbar/defi/off-notif.svg | 11 -------- .../parametre/{off.svg => parametre-off.svg} | 0 .../parametre/{on.svg => parametre-on.svg} | 0 .../CommonKit/Card/StyledIconCard.tsx | 4 +-- src/components/CommonKit/Icon/StyledIcon.tsx | 12 +++++++- .../EcogestureCard/EcogestureCard.tsx | 14 ++++++++-- .../EcogestureModal/EcogestureModal.tsx | 6 +++- .../ContentComponents/Navbar/Navbar.tsx | 28 +++++++++---------- src/utils/utils.ts | 5 ++++ 13 files changed, 48 insertions(+), 32 deletions(-) rename src/assets/icons/tabbar/conso/{off.svg => conso-off.svg} (100%) rename src/assets/icons/tabbar/conso/{on.svg => conso-on.svg} (100%) rename src/assets/icons/tabbar/defi/{off.svg => defi-off.svg} (100%) rename src/assets/icons/tabbar/defi/{on.svg => defi-on.svg} (100%) delete mode 100644 src/assets/icons/tabbar/defi/off-notif.svg rename src/assets/icons/tabbar/parametre/{off.svg => parametre-off.svg} (100%) rename src/assets/icons/tabbar/parametre/{on.svg => parametre-on.svg} (100%) 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 c4f4f42c5..000000000 --- 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 aa9228ba2..9deb63a31 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 d543c4412..2b6dd0e7d 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 1c77341c6..bb35c720a 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 b4514af9f..a80f42e5e 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 fdd9bb3f0..b696f637a 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 befddaeb5..8abaa6899 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] +} -- GitLab