packages/icons/Icons.tsx

   1 import { memo, useEffect, useState } from 'react';
   2
   3 import noop from '@proton/utils/noop';
   4
   5 import svgFilesSprite from './assets/file-icons.svg';
   6 import svgIconsSprite from './assets/sprite-icons.svg';
   7 import { ICONS_ID } from './constants';
   8
   9 // Generate subresource integrity of these svg files so that we don't need to sanitize them.
  10 // We trust our own bundle but not necessarily where the static assets are hosted.
  11 // This is injected at build time by the SriWebpackPlugin.
  12 const svgFilesIntegrity = '__sri_generate__:assets/static/file-icons.*.svg';
  13 const svgIconsIntegrity = '__sri_generate__:assets/static/sprite-icons.*.svg';
  14
  15 const fetchSvgText = (url: string, integrity: string) => {
  16     return fetch(url, { integrity: integrity || 'sha384-invalid-integrity' }).then((response) => response.text());
  17 };
  18
  19 const Icons = memo(function Icons() {
  20     const [svg, setSvg] = useState('');
  21
  22     useEffect(() => {
  23         const run = async () => {
  24             const [svgIcons, svgFiles] = await Promise.all([
  25                 fetchSvgText(svgIconsSprite, svgIconsIntegrity),
  26                 fetchSvgText(svgFilesSprite, svgFilesIntegrity),
  27             ]);
  28             setSvg(`${svgIcons}${svgFiles}`);
  29         };
  30         run().catch(noop);
  31     }, []);
  32
  33     return <div id={ICONS_ID} dangerouslySetInnerHTML={{ __html: svg }} />;
  34 });
  35
  36 export default Icons;