@livechat/design-system-icons 1.0.0-alpha.11 → 1.0.0-alpha.17

package/lib/react/material/Apple.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgApple = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-80.823 0 909.283 909.283"
+    {...props}
+  >
+    <defs>
+      <clipPath id="apple_svg__a">
+        <path d="M45.3 72h13v15.8h-13V71.9z" />
+      </clipPath>
+    </defs>
+    <g
+      transform="matrix(54.85033 0 0 -54.85033 -2466 4835)"
+      clipPath="url(#apple_svg__a)"
+    >
+      <path d="M56.1 79.4c0 2 1.6 3 1.7 3A3.7 3.7 0 0 1 55 84c-1.2 0-2.4-.8-3-.8-.6 0-1.6.7-2.6.7-1.4 0-2.6-.8-3.3-2-1.4-2.4-.4-6 1-8 .7-1 1.4-2 2.5-2 1 0 1.4.7 2.6.7 1.2 0 1.5-.7 2.6-.7 1 0 1.8 1 2.4 2 .8 1.1 1.1 2.2 1.1 2.3 0 0-2 .8-2.1 3.2" />
+    </g>
+    <path d="M501.8 158.5c30.3-36.8 50.9-88 45.2-139-43.8 1.8-96.7 29.2-128.2 66C390.7 118 366 170 372.7 220c48.8 3.8 98.7-24.9 129-61.6" />
+  </svg>
+);
+
+export default SvgApple;

package/lib/react/material/Camera.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCamera = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="currentcolor" />
+    <path
+      d="M20 4h-3.17l-1.24-1.35A1.99 1.99 0 0 0 14.12 2H9.88c-.56 0-1.1.24-1.48.65L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCamera;

package/lib/react/material/Chrome.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChrome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M22.39 6A12 12 0 0 0 1.606 6l.72 12.96L22.39 6Z"
+      fill="url(#chrome_svg__a)"
+    />
+    <path
+      d="M6.804 15 1.608 6A12 12 0 0 0 12 24l11.76-12-16.956 3Z"
+      fill="url(#chrome_svg__b)"
+    />
+    <path
+      d="M17.196 15 12 24A12 12 0 0 0 22.39 6H12l5.196 9Z"
+      fill="url(#chrome_svg__c)"
+    />
+    <path d="M12 18a6 6 0 1 0 0-12.002A6 6 0 0 0 12 18Z" fill="#fff" />
+    <path
+      d="M12 16.752a4.753 4.753 0 1 0 0-9.505 4.753 4.753 0 0 0 0 9.505Z"
+      fill="#1A73E8"
+    />
+    <defs>
+      <linearGradient
+        id="chrome_svg__a"
+        x1={1.608}
+        y1={7.5}
+        x2={22.39}
+        y2={7.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#D93025" />
+        <stop offset={1} stopColor="#EA4335" />
+      </linearGradient>
+      <linearGradient
+        id="chrome_svg__b"
+        x1={13.298}
+        y1={23.249}
+        x2={2.906}
+        y2={5.249}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#1E8E3E" />
+        <stop offset={1} stopColor="#34A853" />
+      </linearGradient>
+      <linearGradient
+        id="chrome_svg__c"
+        x1={10.248}
+        y1={24}
+        x2={20.64}
+        y2={6.031}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FCC934" />
+        <stop offset={1} stopColor="#FBBC04" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgChrome;

package/lib/react/material/Code.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCode = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2Zm0 16H5V7h14v12Zm-3-7H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1Zm-4 4H8c-.55 0-1-.45-1-1s.45-1 1-1h4c.55 0 1 .45 1 1s-.45 1-1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCode;

package/lib/react/material/Columns.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgColumns = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2ZM8 18H4V6h4v12Zm6 0h-4V6h4v12Zm6 0h-4V6h4v12Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgColumns;

package/lib/react/material/ContentCopy.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgContentCopy = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 17 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 18H2V5c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1Zm5-4V2c0-1.1-.9-2-2-2H6C4.9 0 4 .9 4 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2Zm-2 0H6V2h9v12Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgContentCopy;

package/lib/react/material/DeviceMobile.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDeviceMobile = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0.5 24 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 1H8a2.5 2.5 0 0 0-2.5 2.5v17A2.5 2.5 0 0 0 8 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 16 1Zm-4 21c-.83 0-1.5-.67-1.5-1.5S11.17 19 12 19s1.5.67 1.5 1.5S12.83 22 12 22Zm4.5-4h-9V4h9v14Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDeviceMobile;

package/lib/react/material/Edge.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEdge = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21.666 17.86a8.79 8.79 0 0 1-.994.44 9.554 9.554 0 0 1-3.366.6c-4.434 0-8.297-3.047-8.297-6.966a2.953 2.953 0 0 1 1.538-2.559c-4.013.169-5.044 4.35-5.044 6.797 0 6.937 6.384 7.631 7.763 7.631.74 0 1.856-.216 2.53-.431l.123-.038a12.028 12.028 0 0 0 6.244-4.95.375.375 0 0 0-.497-.525Z"
+      fill="url(#edge_svg__a)"
+    />
+    <path
+      opacity={0.35}
+      d="M21.666 17.86a8.79 8.79 0 0 1-.994.44 9.554 9.554 0 0 1-3.366.6c-4.434 0-8.297-3.047-8.297-6.966a2.953 2.953 0 0 1 1.538-2.559c-4.013.169-5.044 4.35-5.044 6.797 0 6.937 6.384 7.631 7.763 7.631.74 0 1.856-.216 2.53-.431l.123-.038a12.028 12.028 0 0 0 6.244-4.95.375.375 0 0 0-.497-.525Z"
+      fill="url(#edge_svg__b)"
+    />
+    <path
+      d="M9.91 22.622a7.424 7.424 0 0 1-2.129-1.997 7.566 7.566 0 0 1 2.766-11.25c.3-.14.797-.384 1.462-.375a3.038 3.038 0 0 1 2.41 1.219 2.99 2.99 0 0 1 .59 1.753c0-.019 2.297-7.463-7.5-7.463-4.115 0-7.5 3.9-7.5 7.332a12.206 12.206 0 0 0 1.135 5.25 12 12 0 0 0 14.662 6.28 7.079 7.079 0 0 1-5.887-.75h-.01Z"
+      fill="url(#edge_svg__c)"
+    />
+    <path
+      opacity={0.41}
+      d="M9.91 22.622a7.424 7.424 0 0 1-2.129-1.997 7.566 7.566 0 0 1 2.766-11.25c.3-.14.797-.384 1.462-.375a3.038 3.038 0 0 1 2.41 1.219 2.99 2.99 0 0 1 .59 1.753c0-.019 2.297-7.463-7.5-7.463-4.115 0-7.5 3.9-7.5 7.332a12.206 12.206 0 0 0 1.135 5.25 12 12 0 0 0 14.662 6.28 7.079 7.079 0 0 1-5.887-.75h-.01Z"
+      fill="url(#edge_svg__d)"
+    />
+    <path
+      d="M14.287 13.95c-.084.094-.318.234-.318.525 0 .244.16.488.45.684 1.34.938 3.881.807 3.89.807 1-.001 1.98-.27 2.841-.778a5.756 5.756 0 0 0 2.85-4.96c.028-2.1-.75-3.497-1.06-4.115C20.945 2.23 16.66 0 12 0A12 12 0 0 0 0 11.831C.047 8.41 3.45 5.644 7.5 5.644c.328 0 2.203.028 3.938.937a6.806 6.806 0 0 1 2.896 2.747c.572.994.675 2.26.675 2.766 0 .506-.253 1.247-.73 1.865l.008-.009Z"
+      fill="url(#edge_svg__e)"
+    />
+    <path
+      d="M14.287 13.95c-.084.094-.318.234-.318.525 0 .244.16.488.45.684 1.34.938 3.881.807 3.89.807 1-.001 1.98-.27 2.841-.778a5.756 5.756 0 0 0 2.85-4.96c.028-2.1-.75-3.497-1.06-4.115C20.945 2.23 16.66 0 12 0A12 12 0 0 0 0 11.831C.047 8.41 3.45 5.644 7.5 5.644c.328 0 2.203.028 3.938.937a6.806 6.806 0 0 1 2.896 2.747c.572.994.675 2.26.675 2.766 0 .506-.253 1.247-.73 1.865l.008-.009Z"
+      fill="url(#edge_svg__f)"
+    />
+    <defs>
+      <radialGradient
+        id="edge_svg__b"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(8.94375 0 0 8.49656 14.738 16.72)"
+      >
+        <stop offset={0.7} stopOpacity={0} />
+        <stop offset={0.9} stopOpacity={0.5} />
+        <stop offset={1} />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__d"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.01373 -13.29071 10.73755 1.6269 6.615 18.65)"
+      >
+        <stop offset={0.8} stopOpacity={0} />
+        <stop offset={0.9} stopOpacity={0.5} />
+        <stop offset={1} />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__e"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(-.759 18.97503 -40.41278 -1.6165 2.427 4.436)"
+      >
+        <stop stopColor="#35C1F1" />
+        <stop offset={0.1} stopColor="#34C1ED" />
+        <stop offset={0.2} stopColor="#2FC2DF" />
+        <stop offset={0.3} stopColor="#2BC3D2" />
+        <stop offset={0.7} stopColor="#36C752" />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__f"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.55412 8.757 -7.1212 2.07701 22.506 7.247)"
+      >
+        <stop stopColor="#66EB6E" />
+        <stop offset={1} stopColor="#66EB6E" stopOpacity={0} />
+      </radialGradient>
+      <linearGradient
+        id="edge_svg__a"
+        x1={5.503}
+        y1={16.594}
+        x2={22.228}
+        y2={16.594}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0C59A4" />
+        <stop offset={1} stopColor="#114A8B" />
+      </linearGradient>
+      <linearGradient
+        id="edge_svg__c"
+        x1={14.316}
+        y1={9.337}
+        x2={3.881}
+        y2={20.709}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#1B9DE2" />
+        <stop offset={0.2} stopColor="#1595DF" />
+        <stop offset={0.7} stopColor="#0680D7" />
+        <stop offset={1} stopColor="#0078D4" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgEdge;

package/lib/react/material/Firefox.tsx

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFirefox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#firefox_svg__a)">
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.823 11.823 0 0 1 1.216 3.53l.003.019c-1.359-3.277-3.661-4.6-5.543-7.479-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.08 2.08 0 0 1-.18-.461.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.023 0l-.005.003-.01.005.005-.008c-3.017 1.71-4.042 4.877-4.135 6.461A6.127 6.127 0 0 0 8.3 7.697a3.586 3.586 0 0 0-.31-.227 5.227 5.227 0 0 1-.033-2.843A8.867 8.867 0 0 0 5.065 6.79h-.006c-.476-.585-.443-2.512-.415-2.914-.141.055-.276.124-.401.206-.42.29-.814.617-1.175.974-.411.404-.787.84-1.123 1.305v.001-.002A9.67 9.67 0 0 0 .333 9.885l-.016.076c-.023.103-.104.615-.118.727l-.003.025c-.105.53-.17 1.065-.195 1.604v.06c.006 2.91 1.138 5.713 3.173 7.855 2.036 2.142 4.827 3.468 7.823 3.715a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45a11.61 11.61 0 0 0-.78-5.844l.002.002ZM9.284 17.158c.057.026.11.054.167.079l.008.005a6.338 6.338 0 0 1-.175-.084ZM21.941 8.66v-.01l.002.011h-.002Z"
+        fill="url(#firefox_svg__b)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.82 11.82 0 0 1 1.216 3.53v.01l.003.013a10.225 10.225 0 0 1-.374 7.85c-1.377 2.861-4.71 5.793-9.927 5.649C6.005 22.005 1.04 17.955.112 12.652c-.17-.836 0-1.26.085-1.94a8.404 8.404 0 0 0-.193 1.605v.06c.005 2.91 1.137 5.714 3.173 7.856 2.035 2.142 4.827 3.467 7.822 3.714a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45.248-1.98-.02-3.99-.779-5.843l-.001.001Z"
+        fill="url(#firefox_svg__c)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.82 11.82 0 0 1 1.216 3.53v.01l.003.013a10.225 10.225 0 0 1-.374 7.85c-1.377 2.861-4.71 5.793-9.927 5.649C6.005 22.005 1.04 17.955.112 12.652c-.17-.836 0-1.26.085-1.94a8.404 8.404 0 0 0-.193 1.605v.06c.005 2.91 1.137 5.714 3.173 7.856 2.035 2.142 4.827 3.467 7.822 3.714a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45.248-1.98-.02-3.99-.779-5.843l-.001.001Z"
+        fill="url(#firefox_svg__d)"
+      />
+      <path
+        d="M17.292 9.418c.026.017.05.035.074.053a6.36 6.36 0 0 0-1.116-1.41c-3.735-3.616-.978-7.838-.514-8.054L15.741 0c-3.018 1.71-4.042 4.877-4.135 6.461.14-.009.279-.02.422-.02a6.217 6.217 0 0 1 3.046.8 5.967 5.967 0 0 1 2.218 2.176Z"
+        fill="url(#firefox_svg__e)"
+      />
+      <path
+        d="M12.034 10.14c-.02.29-1.076 1.288-1.445 1.288-3.416 0-3.97 2-3.97 2 .15 1.685 1.363 3.074 2.83 3.806.066.034.134.064.202.094.117.05.235.097.353.14.503.172 1.03.27 1.563.292 5.99.271 7.148-6.933 2.827-9.025a4.254 4.254 0 0 1 2.897.681 5.968 5.968 0 0 0-2.218-2.175 6.217 6.217 0 0 0-3.046-.801c-.143 0-.282.011-.422.02a6.127 6.127 0 0 0-3.308 1.234c.183.15.39.35.826.767.815.777 2.906 1.583 2.91 1.677l.001.003Z"
+        fill="url(#firefox_svg__f)"
+      />
+      <path
+        d="M12.034 10.14c-.02.29-1.076 1.288-1.445 1.288-3.416 0-3.97 2-3.97 2 .15 1.685 1.363 3.074 2.83 3.806.066.034.134.064.202.094.117.05.235.097.353.14.503.172 1.03.27 1.563.292 5.99.271 7.148-6.933 2.827-9.025a4.254 4.254 0 0 1 2.897.681 5.968 5.968 0 0 0-2.218-2.175 6.217 6.217 0 0 0-3.046-.801c-.143 0-.282.011-.422.02a6.127 6.127 0 0 0-3.308 1.234c.183.15.39.35.826.767.815.777 2.906 1.583 2.91 1.677l.001.003Z"
+        fill="url(#firefox_svg__g)"
+      />
+      <path
+        d="M7.738 7.31c.097.06.177.113.248.16a5.227 5.227 0 0 1-.034-2.843A8.867 8.867 0 0 0 5.06 6.791c.058-.002 1.801-.032 2.678.52Z"
+        fill="url(#firefox_svg__h)"
+      />
+      <path
+        d="M.11 12.653c.927 5.303 5.893 9.354 11.529 9.507 5.217.143 8.55-2.789 9.926-5.648a10.225 10.225 0 0 0 .374-7.85V8.65c0-.009-.002-.014 0-.011l.002.02c.426 2.694-.99 5.302-3.203 7.07l-.006.015c-4.312 3.4-8.438 2.051-9.272 1.5a6.643 6.643 0 0 1-.175-.084c-2.514-1.163-3.553-3.379-3.33-5.282a3.161 3.161 0 0 1-1.688-.458 3.02 3.02 0 0 1-1.158-1.275 4.657 4.657 0 0 1 4.417-.172 6.165 6.165 0 0 0 4.511.172c-.004-.094-2.095-.9-2.91-1.677-.436-.416-.643-.616-.826-.767a3.586 3.586 0 0 0-.31-.227 16.918 16.918 0 0 0-.248-.16c-.877-.551-2.62-.52-2.677-.52H5.06c-.476-.583-.442-2.51-.415-2.913-.14.055-.275.124-.401.207-.42.29-.813.616-1.174.973-.413.403-.79.838-1.128 1.302v.002-.002A9.67 9.67 0 0 0 .33 9.886c-.006.024-.433 1.83-.222 2.767H.11Z"
+        fill="url(#firefox_svg__i)"
+      />
+      <path
+        d="M16.25 8.061c.439.417.814.892 1.116 1.41.066.049.128.097.18.143 2.724 2.431 1.297 5.868 1.19 6.11 2.213-1.764 3.628-4.375 3.203-7.07-1.36-3.28-3.664-4.604-5.543-7.482-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.076 2.076 0 0 1-.18-.46.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.022 0l-.006.002-.009.005c-.465.213-3.22 4.439.515 8.052l-.002.005Z"
+        fill="url(#firefox_svg__j)"
+      />
+      <path
+        d="M17.546 9.616a2.502 2.502 0 0 0-.18-.143c-.025-.018-.049-.036-.075-.053a4.254 4.254 0 0 0-2.897-.681c4.321 2.091 3.162 9.294-2.827 9.024a5.498 5.498 0 0 1-1.563-.292 6.45 6.45 0 0 1-.556-.233l.009.005c.835.552 4.96 1.9 9.272-1.5l.007-.016c.107-.243 1.534-3.68-1.19-6.11v-.001Z"
+        fill="url(#firefox_svg__k)"
+      />
+      <path
+        d="M6.618 13.427s.555-2.001 3.971-2.001c.37 0 1.426-.998 1.445-1.287a6.165 6.165 0 0 1-4.51-.172 4.657 4.657 0 0 0-4.418.172c.25.524.653.967 1.158 1.275a3.161 3.161 0 0 0 1.689.458c-.223 1.902.815 4.118 3.329 5.282.056.026.109.054.166.08-1.467-.735-2.678-2.122-2.83-3.806v-.001Z"
+        fill="url(#firefox_svg__l)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.823 11.823 0 0 1 1.216 3.53l.003.019c-1.359-3.277-3.661-4.6-5.543-7.479-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.076 2.076 0 0 1-.18-.461.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.023 0l-.005.003-.01.005.005-.008c-3.017 1.71-4.042 4.877-4.135 6.461.14-.009.28-.02.422-.02a6.217 6.217 0 0 1 3.047.8 5.966 5.966 0 0 1 2.217 2.176 4.254 4.254 0 0 0-2.897-.681c4.321 2.092 3.162 9.294-2.827 9.024a5.498 5.498 0 0 1-1.563-.292 6.452 6.452 0 0 1-.353-.14c-.068-.03-.136-.06-.203-.093l.009.005a6.338 6.338 0 0 1-.175-.084c.056.026.109.054.166.079-1.467-.734-2.678-2.122-2.83-3.806 0 0 .555-2 3.972-2 .369 0 1.426-.998 1.444-1.288-.004-.094-2.095-.9-2.91-1.677C8.69 8.05 8.484 7.85 8.3 7.7a3.586 3.586 0 0 0-.31-.228 5.227 5.227 0 0 1-.034-2.843 8.867 8.867 0 0 0-2.892 2.164H5.06c-.476-.584-.443-2.511-.416-2.914-.14.055-.275.124-.4.207-.421.29-.814.616-1.175.973-.411.404-.787.84-1.123 1.305v.002-.002A9.67 9.67 0 0 0 .334 9.887l-.016.077c-.023.102-.124.622-.139.734a13.114 13.114 0 0 0-.177 1.621v.06c.005 2.91 1.137 5.714 3.173 7.856 2.036 2.142 4.827 3.467 7.823 3.714a12.296 12.296 0 0 0 8.358-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.037-.299.055-.45.247-1.98-.02-3.989-.78-5.843h.001Zm-1.192.598.002.012-.002-.012Z"
+        fill="url(#firefox_svg__m)"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="firefox_svg__c"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0478 0 0 24.2491 20.77 2.701)"
+      >
+        <stop offset={0.129} stopColor="#FFBD4F" />
+        <stop offset={0.186} stopColor="#FFAC31" />
+        <stop offset={0.247} stopColor="#FF9D17" />
+        <stop offset={0.283} stopColor="#FF980E" />
+        <stop offset={0.403} stopColor="#FF563B" />
+        <stop offset={0.467} stopColor="#FF3750" />
+        <stop offset={0.71} stopColor="#F5156C" />
+        <stop offset={0.782} stopColor="#EB0878" />
+        <stop offset={0.86} stopColor="#E50080" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__d"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0478 0 0 24.2491 11.47 12.605)"
+      >
+        <stop offset={0.3} stopColor="#960E18" />
+        <stop offset={0.351} stopColor="#B11927" stopOpacity={0.74} />
+        <stop offset={0.435} stopColor="#DB293D" stopOpacity={0.343} />
+        <stop offset={0.497} stopColor="#F5334B" stopOpacity={0.094} />
+        <stop offset={0.53} stopColor="#FF3750" stopOpacity={0} />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__e"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(18.1441 0 0 17.5656 14.57 -2.701)"
+      >
+        <stop offset={0.132} stopColor="#FFF44F" />
+        <stop offset={0.252} stopColor="#FFDC3E" />
+        <stop offset={0.506} stopColor="#FF9D12" />
+        <stop offset={0.526} stopColor="#FF980E" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__f"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(11.9256 0 0 11.5453 8.68 18.907)"
+      >
+        <stop offset={0.353} stopColor="#3A8EE6" />
+        <stop offset={0.472} stopColor="#5C79F0" />
+        <stop offset={0.669} stopColor="#9059FF" />
+        <stop offset={1} stopColor="#C139E6" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__g"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(6.14688 -1.43874 1.63636 6.99122 12.681 10.523)"
+      >
+        <stop offset={0.206} stopColor="#9059FF" stopOpacity={0} />
+        <stop offset={0.278} stopColor="#8C4FF3" stopOpacity={0.064} />
+        <stop offset={0.747} stopColor="#7716A8" stopOpacity={0.45} />
+        <stop offset={0.975} stopColor="#6E008B" stopOpacity={0.6} />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__h"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(8.58073 0 0 8.30712 11.16 1.8)"
+      >
+        <stop stopColor="#FFE226" />
+        <stop offset={0.121} stopColor="#FFDB27" />
+        <stop offset={0.295} stopColor="#FFC82A" />
+        <stop offset={0.502} stopColor="#FFA930" />
+        <stop offset={0.732} stopColor="#FF7E37" />
+        <stop offset={0.792} stopColor="#FF7139" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__i"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(36.6107 0 0 35.4433 17.98 -3.601)"
+      >
+        <stop offset={0.113} stopColor="#FFF44F" />
+        <stop offset={0.456} stopColor="#FF980E" />
+        <stop offset={0.622} stopColor="#FF5634" />
+        <stop offset={0.716} stopColor="#FF3647" />
+        <stop offset={0.904} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__j"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.81556 25.8299 -17.49736 1.90728 14.937 -1.636)"
+      >
+        <stop stopColor="#FFF44F" />
+        <stop offset={0.06} stopColor="#FFE847" />
+        <stop offset={0.168} stopColor="#FFC830" />
+        <stop offset={0.304} stopColor="#FF980E" />
+        <stop offset={0.356} stopColor="#FF8B16" />
+        <stop offset={0.455} stopColor="#FF672A" />
+        <stop offset={0.57} stopColor="#FF3647" />
+        <stop offset={0.737} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__k"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(22.853 0 0 22.1243 11.16 4.802)"
+      >
+        <stop offset={0.137} stopColor="#FFF44F" />
+        <stop offset={0.48} stopColor="#FF980E" />
+        <stop offset={0.592} stopColor="#FF5634" />
+        <stop offset={0.655} stopColor="#FF3647" />
+        <stop offset={0.904} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__l"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0137 0 0 24.2161 17.05 6.002)"
+      >
+        <stop offset={0.094} stopColor="#FFF44F" />
+        <stop offset={0.231} stopColor="#FFE141" />
+        <stop offset={0.509} stopColor="#FFAF1E" />
+        <stop offset={0.626} stopColor="#FF980E" />
+      </radialGradient>
+      <linearGradient
+        id="firefox_svg__b"
+        x1={21.542}
+        y1={3.717}
+        x2={2.219}
+        y2={22.974}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.048} stopColor="#FFF44F" />
+        <stop offset={0.111} stopColor="#FFE847" />
+        <stop offset={0.225} stopColor="#FFC830" />
+        <stop offset={0.368} stopColor="#FF980E" />
+        <stop offset={0.401} stopColor="#FF8B16" />
+        <stop offset={0.462} stopColor="#FF672A" />
+        <stop offset={0.534} stopColor="#FF3647" />
+        <stop offset={0.705} stopColor="#E31587" />
+      </linearGradient>
+      <linearGradient
+        id="firefox_svg__m"
+        x1={21.3}
+        y1={3.618}
+        x2={4.88}
+        y2={20.582}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.167} stopColor="#FFF44F" stopOpacity={0.8} />
+        <stop offset={0.266} stopColor="#FFF44F" stopOpacity={0.634} />
+        <stop offset={0.489} stopColor="#FFF44F" stopOpacity={0.217} />
+        <stop offset={0.6} stopColor="#FFF44F" stopOpacity={0} />
+      </linearGradient>
+      <clipPath id="firefox_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SvgFirefox;

package/lib/react/material/Glasses.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgGlasses = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.042 3.713A1 1 0 0 1 6 3h2a1 1 0 0 1 0 2H6.744l-2.24 7.466A4.502 4.502 0 0 1 10.744 15h2.512a4.502 4.502 0 0 1 6.24-2.534L17.256 5H16a1 1 0 1 1 0-2h2a1 1 0 0 1 .958.713l3 10c.028.093.042.19.042.287v2.5a4.5 4.5 0 0 1-8.973.5h-2.054A4.5 4.5 0 0 1 2 16.5V14a1 1 0 0 1 .042-.287l3-10ZM4 16.5a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0ZM17.5 14a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgGlasses;

package/lib/react/material/InternetExplorer.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInternetExplorer = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M23.944 12.582c0-1.934-.493-3.755-1.345-5.348 3.7-8.42-3.924-7.168-4.373-7.168-1.57.318-3.14.83-4.484 1.479-5.158-.063-9.642 2.73-11.1 8.534 2.69-3.072 4.597-4.324 5.718-4.78-.235.217-.47.445-.706.672-1.794 1.82-3.252 3.641-4.485 5.575-.953 1.707-2.018 3.186-2.579 5.12-3.027 11.151 6.503 6.486 7.848 5.69a10.54 10.54 0 0 0 4.821 1.126c4.71 0 8.745-3.072 10.203-7.282h-5.718c-2.69 4.324-9.081 2.39-9.306-2.275H23.91c.059-.467.09-.934.09-1.366l-.056.023Zm-2.018-10.81c.93.638 1.682 1.593.392 5.007-1.233-2.048-3.027-3.641-5.27-4.438.999-.489 3.476-1.479 4.934-.569h-.056ZM2.082 22.367c-.763-.785-.897-2.73.784-6.258a10.734 10.734 0 0 0 4.71 5.803c-1.088.603-3.925 1.934-5.494.376v.08ZM8.36 10.99c.086-2.503 2.242-4.551 4.933-4.551 2.69 0 4.821 2.048 4.933 4.551H8.36Z"
+      fill="#1EBBEE"
+    />
+  </svg>
+);
+
+export default SvgInternetExplorer;

package/lib/react/material/Linux.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgLinux = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="2 2 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.842 6.67c-.212.024-.14.218-.257.223-.116.004-.093-.249.257-.222Zm.638.033c.207-.053.208.155.32.117.11-.037-.002-.264-.32-.117Zm7.107 13.598c-.637.32-1.468 1.032-1.779 1.327-.228.218-1.185.327-1.717.053-.63-.324-.296-.83-1.269-.855a40.044 40.044 0 0 0-1.425-.01c-.417.006-.834.019-1.26.041-1.46.013-1.603.968-2.534.933-.637-.023-1.44-.526-2.821-.815-.97-.202-1.902-.25-2.101-.68-.2-.427.245-.907.275-1.334.036-.556-.421-1.312-.083-1.605.28-.243.891-.065 1.285-.285.42-.233.588-.427.588-.938.155.522-.007.955-.353 1.167-.207.124-.59.19-.905.158-.25-.023-.405.017-.48.112-.097.124-.066.34.056.628.122.287.27.47.25.822-.02.352-.408.77-.346 1.067.024.114.136.209.405.285.444.125 1.238.238 2.022.429.871.214 1.77.616 2.33.539 1.67-.233.717-2.025.447-2.451-1.41-2.221-2.343-3.675-3.09-3.098-.195.15-.202-.377-.194-.58.032-.73.403-.986.623-1.554.413-1.064.734-2.282 1.372-2.912.475-.608 1.216-1.608 1.358-2.136-.12-1.148-.156-2.356-.175-3.414-.018-1.126.16-2.113 1.432-2.804.31-.168.713-.23 1.14-.234.763-.009 1.605.205 2.142.603.858.636 1.396 1.989 1.334 2.961-.051.75.084 1.534.324 2.34.287.96.742 1.633 1.464 2.399.87.923 1.549 2.742 1.74 3.894.179 1.077-.055 1.742-.291 1.775-.352.052-.571 1.17-1.673 1.117-.703-.033-.772-.449-.967-.802-.313-.566-.631-.39-.76.2-.065.302-.017.735.08 1.071.196.69.128 1.343.011 2.136-.225 1.521 1.063 1.809 1.932 1.086.858-.714 1.041-.828 2.126-1.198 1.636-.56 1.087-1.056.207-1.352-.789-.265-.822-1.598-.539-1.85.063 1.432.808 1.64 1.124 1.835 1.353.84-.511 1.53-1.305 1.93Zm-3.644-4.193c.15-.177.325-.196.556-.2.035-.873 1.394-.809 1.839-.444 0-.202-.427-.383-.598-.469.296-.985.157-1.38-.04-2.31-.148-.71-.795-1.666-1.302-1.965.128.112.37.438.628.916.442.823.878 2.039.587 3.06-.111.39-.367.44-.543.46-.779.08-.32-.921-.644-2.3-.36-1.535-.73-1.65-.822-1.77-.447-1.996-.943-1.797-1.083-2.55-.127-.667.58-1.218-.38-1.405-.294-.057-.713-.354-.88-.376-.166-.022-.247-1.1.36-1.144.608-.044.724.687.605.975-.173.285.012.391.313.298.246-.075.087-.715.146-.81-.159-.917-.542-1.049-.94-1.126-1.513.116-.834 1.792-.987 1.63-.214-.227-.859-.012-.856-.158.014-.854-.272-1.35-.667-1.36-.439-.013-.62.602-.646.949-.026.332.197 1.025.36.972.107-.035.29-.25.094-.248-.101.001-.254-.236-.27-.524-.015-.287.09-.576.464-.561.438.017.433.872.386.905-.14.097-.32.285-.34.317-.139.234-.418.291-.52.393-.195.195-.235.416-.089.5.501.287.338.607 1.039.637.46.018.806-.072 1.12-.167.243-.074 1.027-.241 1.192-.529.072-.122.162-.126.222-.091.105.06.128.264-.143.337-.388.105-.779.311-1.122.449-.342.138-.451.192-.774.251-.727.13-1.264-.263-.776.209.161.157.317.255.735.238.917-.036 1.943-1.136 2.045-.644.02.101-.29.239-.533.36-.86.422-1.464 1.257-2.014.968-.493-.26-.982-1.48-.974-.934.014.844-1.112 1.595-.594 2.555-.335.091-1.1 1.705-1.21 2.545-.06.476.046 1.074-.068 1.408-.166.482-.918-.46-.678-1.616.043-.203.007-.246-.047-.148-.306.54-.138 1.294.103 1.823.106.228.352.33.535.533.394.44 1.902 1.559 2.175 1.827a.678.678 0 0 1-.466 1.144c.361.68.713.745.707 1.858.409-.22.244-.699.074-1.015-.12-.216-.276-.314-.242-.365.025-.038.236-.219.362-.077.372.417 1.074.491 1.829.397.753-.095 1.561-.359 1.935-.96.175-.282.301-.381.382-.332.08.05.116.25.107.57-.01.355-.158.724-.25 1.018-.105.334-.137.571.189.584.096-.617.266-1.225.315-1.84.055-.698-.451-2 .094-2.648Zm-4.618-9.923c-.025.138-.015.224.08.224.016 0 .032-.003.038-.038.046-.274-.095-.473-.153-.489-.134-.033-.117.159-.048.144.043-.009.1.061.083.16Zm2.487-.376c-.138.013-.098.082-.03.101.09.027.175.18.194.346.001.015.115-.024.115-.06.009-.266-.219-.392-.279-.387Z"
+      fill="#000"
+    />
+  </svg>
+);
+
+export default SvgLinux;

package/lib/react/material/MoveTo.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgMoveTo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 6h-8l-1.41-1.41C10.21 4.21 9.7 4 9.17 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2Zm-1 12H5c-.55 0-1-.45-1-1V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1Z"
+      fill="currentcolor"
+    />
+    <path
+      d="M12 16.091v-1.8H9c-.55 0-1-.45-1-1s.45-1 1-1h3v-1.79c0-.45.54-.67.85-.35l2.79 2.8c.19.2.19.51 0 .71l-2.79 2.79c-.31.3-.85.08-.85-.36Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgMoveTo;