GeotrekCE · dtrucs · Jul 27, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/frontend/package.json b/frontend/package.json
@@ -67,7 +67,7 @@
     "react-dom": "^18.2.0",
     "react-easyfullscreen": "^1.1.1",
     "react-infinite-scroll-component": "6.1.0",
-    "react-inlinesvg": "^3.0.1",
+    "react-inlinesvg": "^3.0.2",
     "react-intl": "^6.2.1",
     "react-leaflet": "3.1.0",
     "react-leaflet-markercluster": "^3.0.0-rc1",
@@ -79,6 +79,7 @@
     "store": "^2.0.12",
     "striptags": "^3.2.0",
     "styled-components": "^5.3.6",
+    "svgo": "^3.0.2",
     "tailwind-merge": "^1.12.0",
     "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",

diff --git a/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx b/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import SVG from 'react-inlinesvg';
-import styled from 'styled-components';
 
-import { colorPalette } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Link } from 'components/Link';
 
 interface Props {
@@ -13,19 +12,12 @@ interface Props {
 
 export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label }) => {
   return (
-    <Link href={href}>
-      <span className="flex flex-col items-center mt-6 text-greyDarkColored bg-white transition-colors hover:text-primary3">
-        <FilledSvg src={iconUrl} className="h-9 desktop:w-12" />
-        <span className="w-20 text-sm text-center text-greyDarkColored mt-2 text-ellipsis overflow-hidden">
-          {label}
-        </span>
-      </span>
+    <Link
+      href={href}
+      className="flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition hover:text-primary3 focus:text-primary3"
+    >
+      <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={optimizeAndDefineColor()} />
+      <span className="w-20 text-sm mt-2 text-ellipsis overflow-hidden">{label}</span>
     </Link>
   );
 };
-
-const FilledSvg = styled(SVG)`
-  & * {
-    fill: ${colorPalette.home.activity.color} !important;
-  }
-`;
diff --git a/frontend/src/components/CardIcon/CardIcon.tsx b/frontend/src/components/CardIcon/CardIcon.tsx
@@ -1,4 +1,4 @@
-import { colorPalette, fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
 import Image from 'next/image';
@@ -35,8 +35,8 @@ const Icon: React.FC<IconProps> = ({ iconUri = '', className = '', color }) => {
     return (
       <SVG
         src={iconUri}
-        className={`fill-current p-1 ${className}`}
-        preProcessor={fillSvgWithColor(colorPalette.white)}
+        className={`p-1 text-white ${className}`}
+        preProcessor={optimizeAndDefineColor()}
       />
     );
   }

diff --git a/frontend/src/components/Information/RemoteIconInformation/index.tsx b/frontend/src/components/Information/RemoteIconInformation/index.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
 
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Information } from '../BaseInformation';
 
 export interface Props {
@@ -15,7 +16,7 @@ export interface Props {
 export const RemoteIconInformation: React.FC<Props> = ({ iconUri, ...props }) => {
   let icon = null;
   if (RegExp(/(.*).svg/).test(iconUri)) {
-    icon = <SVG src={iconUri} className="w-6 h-full fill-current" />;
+    icon = <SVG src={iconUri} className="w-6 h-full" preProcessor={optimizeAndDefineColor()} />;
   } else if (typeof iconUri === 'string' && iconUri.length) {
     icon = (
       <Image

diff --git a/...src/components/pages/details/components/DetailsInformationDesk/DetailsInformationDesk.tsx b/...src/components/pages/details/components/DetailsInformationDesk/DetailsInformationDesk.tsx
@@ -4,6 +4,7 @@ import parse from 'html-react-parser';
 import { FormattedMessage } from 'react-intl';
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 import Image from 'next/image';
+import { optimizeSVG } from 'stylesheet';
 import { HtmlText } from '../../utils';
 import { useDetailsInformationDesk } from './useDetailsInformationDesk';
 import DetailsInformationDeskLocation from './DetailsInformationDeskLocation';
@@ -111,7 +112,7 @@ export const DetailsInformationDesk: React.FC<DetailsInformationDeskProps> = ({
 
 const InformationDeskIcon: React.FC<{ pictogramUri: string }> = ({ pictogramUri }) => {
   if (RegExp(/(.*).svg/).test(pictogramUri)) {
-    return <SVG src={pictogramUri} className="h-full w-full m-1" />;
+    return <SVG src={pictogramUri} className="h-full w-full m-1" preProcessor={optimizeSVG} />;
   }
   return (
     <Image

diff --git a/frontend/src/components/pages/details/components/DetailsLabel/DetailsLabel.tsx b/frontend/src/components/pages/details/components/DetailsLabel/DetailsLabel.tsx
@@ -4,6 +4,7 @@ import { HtmlText } from 'components/pages/details/utils';
 import { Label } from 'modules/label/interface';
 import { AlertTriangle } from 'components/Icons/AlertTriangle';
 import Image from 'next/image';
+import { optimizeSVG } from 'stylesheet';
 
 interface DetailsLabelProps extends Label {
   className?: string;
@@ -39,7 +40,13 @@ export const DetailsLabel: React.FC<DetailsLabelProps> = ({
 
 const LabelIcon: React.FC<{ pictogramUri: string }> = ({ pictogramUri }) => {
   if (RegExp(/(.*).svg/).test(pictogramUri)) {
-    return <SVG src={pictogramUri} className="w-6 h-6 desktop:w-10 desktop:h-10" />;
+    return (
+      <SVG
+        src={pictogramUri}
+        className="w-6 h-6 desktop:w-10 desktop:h-10"
+        preProcessor={optimizeSVG}
+      />
+    );
   }
   return (
     <Image

diff --git a/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx b/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
-import { colorPalette, fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 
 interface DetailsSourceProps {
   name: string;
@@ -45,8 +45,8 @@ const SourceIcon: React.FC<{ pictogramUri: string }> = ({ pictogramUri }) => {
       <div className="bg-primary1 h-full w-full">
         <SVG
           src={pictogramUri}
-          className="fill-current h-full w-full p-1 text-white"
-          preProcessor={fillSvgWithColor(colorPalette.white)}
+          className="h-full w-full p-1 text-white"
+          preProcessor={optimizeAndDefineColor()}
         />
       </div>
     );

diff --git a/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx b/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
@@ -3,7 +3,7 @@ import getActivityColor from 'components/pages/search/components/ResultCard/getA
 import { Activity } from 'modules/activities/interface';
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
-import { colorPalette, fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Details } from '../../../../../modules/details/interface';
 import { OutdoorCourseDetails } from '../../../../../modules/outdoorCourse/interface';
 import { OutdoorSiteDetails } from '../../../../../modules/outdoorSite/interface';
@@ -33,7 +33,9 @@ const Icon: React.FC<IconProps> = ({ src = '', ...props }) => {
     return null;
   }
   if (RegExp(/(.*).svg/).test(src)) {
-    return <SVG src={src} {...props} preProcessor={fillSvgWithColor(colorPalette.white)} />;
+    return (
+      <SVG src={src} {...props} className="text-white" preProcessor={optimizeAndDefineColor()} />
+    );
   }
   return <Image loading="lazy" src={src} {...props} alt="" />;
 };

diff --git a/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx b/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx
@@ -4,7 +4,7 @@ import { getHoverId } from 'components/pages/search/utils';
 import { ActivitySuggestion } from 'modules/activitySuggestions/interface';
 import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
-import { colorPalette, fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 
 export interface HomeSectionProps {
   title: string;
@@ -21,7 +21,7 @@ export const HomeSection: React.FC<HomeSectionProps> = ({ title, iconUrl, result
       >
         <SVG
           src={iconUrl}
-          preProcessor={fillSvgWithColor(colorPalette.greyDarkColored)}
+          preProcessor={optimizeAndDefineColor()}
           className="h-10 mr-2 desktop:mr-3"
         />
         <span className="mt-1 desktop:mt-0 text-H2 desktop:text-H2 font-bold">{title}</span>

diff --git a/frontend/src/components/pages/search/components/FilterBar/Field.tsx b/frontend/src/components/pages/search/components/FilterBar/Field.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import SVG from 'react-inlinesvg';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { colorPalette } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { cn } from 'services/utils/cn';
 import { FilterState, Option } from '../../../../../modules/filters/interface';
 
@@ -12,6 +11,24 @@ interface Props {
   hideLabel?: boolean;
 }
 
+interface IconProps {
+  option: Option;
+  isSelected: boolean;
+}
+
+const Icon: React.FC<IconProps> = ({ option, isSelected }) => {
+  if (option.pictogramUrl === undefined) {
+    return null;
+  }
+  return (
+    <SVG
+      className={cn('w-6 h-6 mr-2', isSelected ? 'text-primary1' : 'text-greyDarkColored')}
+      src={option.pictogramUrl}
+      preProcessor={optimizeAndDefineColor()}
+    />
+  );
+};
+
 const Field: React.FC<Props> = ({ filterState, onSelect, hideLabel }) => {
   const intl = useIntl();
 
@@ -31,17 +48,6 @@ const Field: React.FC<Props> = ({ filterState, onSelect, hideLabel }) => {
     }
   };
 
-  const getIcon = (option: Option, isSelected: boolean): React.ReactElement | null => {
-    if (option.pictogramUrl !== undefined)
-      return isSelected ? (
-        <FilledSvgActive src={option.pictogramUrl} />
-      ) : (
-        <FilledSvg src={option.pictogramUrl} />
-      );
-
-    return null;
-  };
-
   return (
     <div>
       {hideLabel !== true && (
@@ -67,7 +73,7 @@ const Field: React.FC<Props> = ({ filterState, onSelect, hideLabel }) => {
               <span
                 className={`flex items-center ${option.pictogramUrl !== undefined ? 'mr-1' : ''}`}
               >
-                {getIcon(option, Boolean(selectedOption))}
+                <Icon option={option} isSelected={Boolean(selectedOption)} />
                 {
                   option.translatedKey !== undefined
                     ? intl.formatMessage({ id: option.translatedKey })
@@ -82,24 +88,4 @@ const Field: React.FC<Props> = ({ filterState, onSelect, hideLabel }) => {
   );
 };
 
-const FilledSvg = styled(SVG)`
-  height: 24px;
-  width: 24px;
-  margin-right: 10px;
-
-  & * {
-    fill: ${colorPalette.home.activity.color} !important;
-  }
-`;
-
-const FilledSvgActive = styled(SVG)`
-  height: 24px;
-  width: 24px;
-  margin-right: 10px;
-
-  & * {
-    fill: ${colorPalette.primary1} !important;
-  }
-`;
-
 export default Field;
diff --git a/frontend/src/stylesheet.ts b/frontend/src/stylesheet.ts
@@ -1,4 +1,5 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components';
+import { optimize } from 'svgo/lib/svgo';
 
 import tailwindConfig from '../tailwind.config';
 /**
@@ -196,8 +197,41 @@ export const scrollBar = {
     border-radius: ${getSpacing(2)};
   `,
 } as const;
+export const optimizeSVG = (svg: string): string => {
+  const { data } = optimize(svg, {
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            inlineStyles: {
+              onlyMatchedOnce: false,
+            },
+            removeViewBox: false,
+          },
+        },
+      },
+      {
+        name: 'convertStyleToAttrs',
+      },
+    ],
+  });
+  return data;
+};
+
+export const optimizeAndDefineColor =
+  (color = 'currentColor') =>
+  (svg: string): string => {
+    const optimizedSVG = optimizeSVG(svg);
+
+    const svgNodesWithoutFillOrStrokeAttributes = /<(?!svg|g|\/)(?![^>]*\b(fill|stroke)\b)[^>]*>/g;
 
-export const fillSvgWithColor =
-  (color: string) =>
-  (svg: string): string =>
-    svg.replace(/fill:.*?;/g, `fill: ${color};`);
+    return optimizedSVG
+      .replace(svgNodesWithoutFillOrStrokeAttributes, (match, p1, offset, string) => {
+        if (offset > 0) {
+          return match.replace('/>', `fill="${color}"/>`);
+        }
+        return string;
+      })
+      .replace(/(fill|stroke)="(?!none|transparent).*?"/gi, `$1="${color}"`);
+  };