Merge pull request #1648 from cozy/svgr-icons

cozy · Nov 10, 2020 · 18d5ce3 · 18d5ce3
2 parents 09b204e + 86cf1f1
commit 18d5ce3
Show file tree

Hide file tree

Showing 58 changed files with 829 additions and 142 deletions.
diff --git a/react/Accordion/index.jsx b/react/Accordion/index.jsx
@@ -5,6 +5,8 @@ import cx from 'classnames'
 import Icon from '../Icon'
 import styles from './styles.styl'
 
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 class AccordionItem extends Component {
   constructor(props) {
     super(props)
@@ -40,7 +42,7 @@ class AccordionItem extends Component {
             aria-expanded={selected}
             aria-controls={contentID}
           >
-            <Icon icon="right" />
+            <Icon icon={RightIcon} />
             {label}
           </div>
         </div>

diff --git a/react/AppSections/components/DropdownFilter.jsx b/react/AppSections/components/DropdownFilter.jsx
@@ -6,10 +6,12 @@ import PropTypes from 'prop-types'
 import styles from './DropdownFilter.styl'
 import cx from 'classnames'
 
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+
 const SmallArrow = () => (
   <Icon
     className={cx(styles.DropdownFilter__icon, 'u-mr-1')}
-    icon="bottom"
+    icon={BottomIcon}
     color="var(--coolGrey)"
     width={16}
     height={16}

diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
@@ -5,6 +5,8 @@ import palette from '../palette'
 import styles from './styles.styl'
 import Icon from '../Icon'
 
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
 const nameToColor = (name = '') => {
   const colors = [
     palette['azure'],
@@ -60,7 +62,7 @@ export const Avatar = ({
       {!image && text && (
         <span className={styles['c-avatar-initials']}>{text}</span>
       )}
-      {!image && !text && <Icon icon="people" />}
+      {!image && !text && <Icon icon={PeopleIcon} />}
     </div>
   )
 }

diff --git a/react/Button/index.jsx b/react/Button/index.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 import styles from './styles.styl'
 import Icon, { iconPropType } from '../Icon'
 
+import SpinnerIcon from 'cozy-ui/transpiled/react/Icons/Spinner'
+
 const btnClass = function(options) {
   const { className, extension, size, theme, variant, round, align } = options
   return cx(
@@ -101,7 +103,7 @@ const BaseButton = props => {
         {restProps.busy && (
           <Icon
             size={sizeToIconSize[size]}
-            icon="spinner"
+            icon={SpinnerIcon}
             spin
             className="u-ml-half"
             aria-hidden

diff --git a/react/CipherIcon/index.jsx b/react/CipherIcon/index.jsx
@@ -6,6 +6,8 @@ import Icon from '../Icon'
 import { withClient } from 'cozy-client'
 import { AppDoctype } from '../proptypes'
 
+import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
+
 class CipherIcon extends React.PureComponent {
   constructor(props) {
     super(props)
@@ -29,7 +31,7 @@ class CipherIcon extends React.PureComponent {
         <div className="u-pos-absolute u-right-0 u-bottom-0">
           <AppIcon fetchIcon={this.fetchIcon} className="u-w-1 u-h-1" />
         </div>
-        <Icon icon="keychain" size={32} />
+        <Icon icon={KeychainIcon} size={32} />
       </div>
     )
   }

diff --git a/react/ContextHeader/index.jsx b/react/ContextHeader/index.jsx
@@ -7,6 +7,8 @@ import styles from './styles.styl'
 import palette from '../palette'
 import cx from 'classnames'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 const ContextHeader = ({ icon, title, text, onClose, className }) => {
   return (
     <div className={cx(styles['context-header'], className)}>
@@ -24,7 +26,7 @@ const ContextHeader = ({ icon, title, text, onClose, className }) => {
           type="button"
         >
           <Icon
-            icon="cross"
+            icon={CrossIcon}
             width="14"
             height="14"
             color={palette['coolGrey']}

diff --git a/react/CozyDialogs/DialogBackButton.jsx b/react/CozyDialogs/DialogBackButton.jsx
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
+
 const DialogBackButton = ({ onClick }) => {
   return (
     <Icon
       onClick={onClick}
-      icon="previous"
+      icon={PreviousIcon}
       className="u-c-pointer u-coolGrey u-mr-1"
     />
   )

diff --git a/react/CozyDialogs/DialogCloseButton.jsx b/react/CozyDialogs/DialogCloseButton.jsx
@@ -5,14 +5,16 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import styles from './styles.styl'
 
+import CrossMediumIcon from 'cozy-ui/transpiled/react/Icons/CrossMedium'
+
 const CloseButton = ({ onClick, ...props }) => {
   return (
     <IconButton
       onClick={onClick}
       className={styles.DialogCloseButton}
       {...props}
     >
-      <Icon icon="cross-medium" />
+      <Icon icon={CrossMediumIcon} />
     </IconButton>
   )
 }

diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx
@@ -7,6 +7,9 @@ import { format } from 'date-fns'
 import styles from './styles.styl'
 import cx from 'classnames'
 
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 const MonthButton = translate()(({ monthNum, f, onClick, isSelected }) => {
   // We do not care care about year and day since we are creating the date
   // only to be able to format it into a monthName
@@ -56,15 +59,15 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           title={year - 1}
           onClick={decreaseYear}
         >
-          <Icon icon="left" />
+          <Icon icon={LeftIcon} />
         </button>
         <div className={cx(styles.DateMonthPicker__Year)}>{year}</div>
         <button
           className={styles.DateMonthPicker__YearButton}
           title={year + 1}
           onClick={increaseYear}
         >
-          <Icon icon="right" />
+          <Icon icon={RightIcon} />
         </button>
       </div>
       <div className={styles.DateMonthPicker__MonthGrid}>

diff --git a/react/DateMonthPicker/index.spec.jsx b/react/DateMonthPicker/index.spec.jsx
@@ -3,6 +3,8 @@ import React from 'react'
 import DateMonthPicker from './index'
 import I18n from '../I18n'
 import { act } from 'react-dom/test-utils'
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 
 const findButtonWithLabel = (root, label) =>
   root.findWhere(n => n.type() == 'button' && n.props().children === label)
@@ -46,7 +48,7 @@ describe('DateMonthPicker', () => {
 
   it('should be able to go to previous year', async () => {
     const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const prevYearButton = findButtonWithIcon(root, 'left')
+    const prevYearButton = findButtonWithIcon(root, LeftIcon)
     act(() => {
       prevYearButton.props().onClick()
     })
@@ -59,7 +61,7 @@ describe('DateMonthPicker', () => {
 
   it('should be able to go to next year', async () => {
     const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const nextYearButton = findButtonWithIcon(root, 'right')
+    const nextYearButton = findButtonWithIcon(root, RightIcon)
     act(() => {
       nextYearButton.props().onClick()
     })

diff --git a/react/DropdownButton/index.jsx b/react/DropdownButton/index.jsx
@@ -3,6 +3,8 @@ import cx from 'classnames'
 import styles from './styles.styl'
 import Icon from '../Icon'
 
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+
 const DropdownButton = React.forwardRef(
   ({ children, className, ...props }, ref) => (
     <button
@@ -13,7 +15,7 @@ const DropdownButton = React.forwardRef(
     >
       {children}
       <Icon
-        icon="bottom"
+        icon={BottomIcon}
         size="12"
         className={styles['c-DropdownButton-Icon']}
       />

diff --git a/react/HistoryRow/index.jsx b/react/HistoryRow/index.jsx
@@ -8,6 +8,8 @@ import palette from '../palette'
 
 import styles from './styles.styl'
 
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
 /**
  *
  * This component display a timeline of file's version
@@ -44,7 +46,7 @@ const HistoryRow = ({
               <Icon
                 className="u-c-pointer"
                 color={palette.coolGrey}
-                icon="download"
+                icon={DownloadIcon}
                 onClick={() => downloadLink()}
               />
             </Img>

diff --git a/react/Icons/BottomSelect.jsx b/react/Icons/BottomSelect.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/bottom-select.svg` to regenerate;
+import React from 'react'
+
+function SvgBottomSelect(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z"
+        fill="#95999d"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgBottomSelect
diff --git a/react/Icons/CheckWhite.jsx b/react/Icons/CheckWhite.jsx
@@ -0,0 +1,17 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/check-white.svg` to regenerate;
+import React from 'react'
+
+function SvgCheckWhite(props) {
+  return (
+    <svg viewBox="0 0 20 20" {...props}>
+      <path
+        d="M3 10.019l4.523 4.523 9.541-9.541"
+        stroke="#FFF"
+        strokeWidth={2}
+        fill="none"
+      />
+    </svg>
+  )
+}
+
+export default SvgCheckWhite
diff --git a/react/Icons/CloudBroken.jsx b/react/Icons/CloudBroken.jsx
@@ -0,0 +1,23 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cloud-broken.svg` to regenerate;
+import React from 'react'
+
+function SvgCloudBroken(props) {
+  return (
+    <svg viewBox="0 0 160 160" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#93BEF8"
+          d="M61.763 130.593l-3.174 7.933h59.045-.003c23.356 0 42.369-19.126 42.369-42.634 0-22.218-16.977-40.52-38.56-42.467a42.494 42.494 0 00-12.426-25.27 42.873 42.873 0 00-4.68-3.992l-3.156 7.892c7.203 6.153 11.888 15.26 12.12 25.41.055 2.478 2.056 4.446 4.499 4.446h.34c18.71 0 33.93 15.405 33.93 34.338 0 18.936-15.22 34.34-33.93 34.34h-.324l-.01.004h-56.04zm39.415-106.538l3.157-7.892C97.128 10.86 88.462 8 79.387 8 68.245 8 57.724 12.311 49.76 20.158c-6.974 6.868-11.308 15.77-12.438 25.4-9.568 1.135-18.411 5.5-25.239 12.514C4.29 66.086 0 76.677 0 87.89c0 23.511 19 42.637 42.366 42.637H58.59l3.174-7.933H42.537c-.097-.007-.194-.007-.292-.007l-.107.007h-.275c-18.71 0-33.93-15.405-33.93-34.341 0-18.507 14.863-33.905 33.132-34.331 2.406-.056 4.343-2.017 4.398-4.45.419-18.494 15.638-33.538 33.92-33.538 8.248 0 15.873 3.062 21.795 8.122z"
+        />
+        <path
+          stroke="#297EF1"
+          strokeLinecap="round"
+          strokeWidth={8}
+          d="M50 156L110 4"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgCloudBroken
diff --git a/react/Icons/Cozy.jsx b/react/Icons/Cozy.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cozy.svg` to regenerate;
+import React from 'react'
+
+function SvgCozy(props) {
+  return (
+    <svg viewBox="0 0 52 52" {...props}>
+      <path
+        fill="#297EF2"
+        fillRule="evenodd"
+        d="M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 4c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11c-.779 0-1.417-.627-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 01-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0032.32 27a.523.523 0 00-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 01-11.138.019 3.554 3.554 0 00.257-1.155.523.523 0 00-.503-.536.526.526 0 00-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 00-.15.731.51.51 0 00.714.154c.225-.15.414-.322.572-.505a9.006 9.006 0 0012.251-.01c.16.184.35.36.582.515a.503.503 0 00.281.085.516.516 0 00.432-.24.537.537 0 00-.15-.731v.002z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCozy
diff --git a/react/Icons/CozyLogo.jsx b/react/Icons/CozyLogo.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cozy-logo.svg` to regenerate;
+import React from 'react'
+
+function SvgCozyLogo(props) {
+  return (
+    <svg viewBox="0 0 101 30" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path d="M0-5h101v40H0z" />
+        <path
+          fill="#297EF1"
+          d="M29.408 30H10.592C4.75 30 0 25.317 0 19.56c0-2.745 1.072-5.338 3.02-7.3a10.589 10.589 0 016.31-3.064 10.316 10.316 0 013.11-6.22A10.607 10.607 0 0119.847 0a10.61 10.61 0 017.406 2.976 10.324 10.324 0 013.107 6.187C35.756 9.64 40 14.121 40 19.561 40 25.317 35.247 30 29.408 30zm-.226-2.5h.079c4.543 0 8.239-3.612 8.239-8.05 0-4.438-3.696-8.048-8.239-8.048h-.083a1.08 1.08 0 01-1.092-1.043C27.983 6.025 24.289 2.5 19.85 2.5c-4.44 0-8.135 3.526-8.237 7.86a1.08 1.08 0 01-1.068 1.044c-4.436.1-8.045 3.709-8.045 8.047 0 4.438 3.696 8.049 8.239 8.049h.067l.026-.002c.024 0 .047 0 .07.002h18.281zm-3.127-8.333v-.002a.38.38 0 01.125.55.453.453 0 01-.594.116 2.329 2.329 0 01-.485-.387c-1.448 1.204-3.28 1.806-5.11 1.806-1.827 0-3.654-.6-5.1-1.798a2.31 2.31 0 01-.476.378.455.455 0 01-.595-.115c-.13-.183-.074-.428.125-.549.732-.438.767-1.247.767-1.279.008-.217.206-.393.44-.386.235.005.423.185.419.402 0 .03-.013.414-.214.866 2.603 2.255 6.684 2.252 9.282-.014-.196-.446-.208-.824-.21-.853-.005-.217.184-.398.422-.402.238-.003.432.169.437.388.002.035.038.84.767 1.279zm33.222-4.905a1.405 1.405 0 01-.227.227.516.516 0 01-.319.085.756.756 0 01-.436-.162 5.113 5.113 0 00-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338a3.179 3.179 0 00-1.19.962c-.316.416-.556.923-.721 1.521a7.592 7.592 0 00-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435a5.93 5.93 0 00.585-.436c.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 01-1.02.949 5.85 5.85 0 01-1.203.637 6.792 6.792 0 01-1.332.364 8.488 8.488 0 01-1.411.117 5.846 5.846 0 01-2.308-.455 5.228 5.228 0 01-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139-.303-.845-.455-1.804-.455-2.879 0-.98.136-1.885.41-2.717a6.046 6.046 0 011.209-2.151 5.588 5.588 0 011.969-1.418c.78-.342 1.673-.513 2.678-.513.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zm8.814-2.678c.97 0 1.848.158 2.633.474a5.489 5.489 0 012.001 1.366c.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 01-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 01-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 011.28-2.146 5.55 5.55 0 012.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM86.46 12.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V25H76.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916v-1.989h9.854v1.066zm14.144-1.066l-7.332 17.043a1.07 1.07 0 01-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L87.5 11.792h2.21c.217 0 .386.052.507.156a.906.906 0 01.26.351l3.354 7.93c.07.2.136.4.201.605a6.6 6.6 0 01.163.604 14.609 14.609 0 01.416-1.222l3.237-7.917a.84.84 0 01.286-.364.729.729 0 01.442-.143h2.028z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgCozyLogo
diff --git a/react/Icons/CrossWhite.jsx b/react/Icons/CrossWhite.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cross-white.svg` to regenerate;
+import React from 'react'
+
+function SvgCrossWhite(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#FFF"
+        fillRule="evenodd"
+        d="M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCrossWhite
diff --git a/react/Icons/DashWhite.jsx b/react/Icons/DashWhite.jsx
@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/dash-white.svg` to regenerate;
+import React from 'react'
+
+function SvgDashWhite(props) {
+  return (
+    <svg viewBox="0 0 20 20" {...props}>
+      <path d="M3.497 10h13.006" stroke="#FFF" strokeWidth={2} />
+    </svg>
+  )
+}
+
+export default SvgDashWhite
diff --git a/react/Icons/DeviceBrowser.jsx b/react/Icons/DeviceBrowser.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-browser.svg` to regenerate;
+import React from 'react'
+
+function SvgDeviceBrowser(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <circle cx={16} cy={16} r={16} fill="#D9DDE1" />
+        <path
+          fill="#95999D"
+          d="M22.76 2.84l.3-1.202.089.044c.115.058.23.117.344.177l.335.184.33.19.338.207.325.209c.231.153.459.312.682.477l.261.198.317.251.359.3.237.208.264.242.238.228.246.245.163.17.221.237.273.306.188.22.314.386.167.217.248.336.189.268.183.271.25.39.19.317.086.149c.135.236.264.476.388.72l.18.368.133.287.166.382.156.387c.173.447.327.903.461 1.369l.032.114c-.575.89-1.613 1.055-2.356.605l-.12-.08-.838-.613a.303.303 0 00-.255-.05l-.063.024-1.075.551a.044.044 0 00.002.03l.3.111a.33.33 0 01.07.036c.88.611.968 1.649.451 2.339l-.087.106-.758.852a1.689 1.689 0 01-2.01.37l-.13-.074-2.045-1.288c-.007-.005-.011-.007-.023-.002l-.01.008-.161.95v.012l.007.01 1.067.974c.55.502.678 1.291.331 1.929l-.081.134-1.697 2.51-.049.15-.148 3.609c-.014.36-.15.7-.386.973l-.107.113-2.316 2.215c-.316.303-.734.46-1.156.46-.23 0-.459-.046-.674-.14l-.159-.08-1.5-.859a1.626 1.626 0 01-.74-.902l-.039-.143-.69-3.08-.663-1.739-.007-.01-.013-.005-3.03-.257a1.663 1.663 0 01-1.198-.666l-.087-.131-1.724-2.902a1.596 1.596 0 01-.22-.893l.016-.155.434-2.815c.056-.367.237-.697.513-.945l.124-.101 2.648-1.95a1.688 1.688 0 011.48-.253l.149.052 2.524 1.029.04.013.043.007 3.411.363.207-.053 2.268-1.587.009-.013-.001-.015-.219-.477-.008-.01-.012-.004-6.61-.353a1.692 1.692 0 01-.729-.21 1.596 1.596 0 01-.817-1.605 1.615 1.615 0 011.06-1.303l.147-.046 1.918-.504.127-.07 2.376-2.19c.225-.207.509-.349.811-.408l.153-.022 3.652-.367c.01-.001.019-.008.02-.018z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDeviceBrowser
diff --git a/react/Icons/DeviceLaptop.jsx b/react/Icons/DeviceLaptop.jsx
@@ -0,0 +1,22 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-laptop.svg` to regenerate;
+import React from 'react'
+
+function SvgDeviceLaptop(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#32363F"
+          d="M2 25V5.995C2 4.893 2.9 4 3.991 4H28.01C29.109 4 30 4.902 30 5.995V25H2z"
+        />
+        <path fill="#5D6165" d="M4 6h24v16H4z" />
+        <path
+          fill="#95999D"
+          d="M19 24.5c0 .276-.233.5-.503.5h-5.994a.507.507 0 01-.503-.5c0-.276-.229-.5-.5-.5H.5c-.276 0-.5.215-.5.49V26c0 1.105.89 2 2.002 2h27.996A1.996 1.996 0 0032 26v-1.51c0-.27-.226-.49-.494-.49H19.494a.502.502 0 00-.494.5z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDeviceLaptop