cozy-ui-plus 8.0.0 → 9.0.0

package/src/Qualification/QualificationIcon/index.jsx

@@ -1,74 +1,76 @@
+import {
+  Icon,
+  Bank,
+  BankCheck,
+  Benefit,
+  Bill,
+  Car,
+  Chess,
+  Child,
+  Dots,
+  Email,
+  Euro,
+  Exchange,
+  Fitness,
+  Globe,
+  Gouv,
+  Heart,
+  Home,
+  Image,
+  Justice,
+  Laudry,
+  Lightning,
+  Note,
+  People,
+  Plane,
+  Remboursement,
+  Restaurant,
+  School,
+  Shop,
+  Team,
+  Telecom,
+  Telephone,
+  Water,
+  Work
+} from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BankIcon from 'cozy-ui/transpiled/react/Icons/Bank'
-import BankCheckIcon from 'cozy-ui/transpiled/react/Icons/BankCheck'
-import BenefitIcon from 'cozy-ui/transpiled/react/Icons/Benefit'
-import BillIcon from 'cozy-ui/transpiled/react/Icons/Bill'
-import CarIcon from 'cozy-ui/transpiled/react/Icons/Car'
-import ChessIcon from 'cozy-ui/transpiled/react/Icons/Chess'
-import ChildIcon from 'cozy-ui/transpiled/react/Icons/Child'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
-import EmailIcon from 'cozy-ui/transpiled/react/Icons/Email'
-import EuroIcon from 'cozy-ui/transpiled/react/Icons/Euro'
-import ExchangeIcon from 'cozy-ui/transpiled/react/Icons/Exchange'
-import FitnessIcon from 'cozy-ui/transpiled/react/Icons/Fitness'
-import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
-import GouvIcon from 'cozy-ui/transpiled/react/Icons/Gouv'
-import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
-import HomeIcon from 'cozy-ui/transpiled/react/Icons/Home'
-import ImageIcon from 'cozy-ui/transpiled/react/Icons/Image'
-import JusticeIcon from 'cozy-ui/transpiled/react/Icons/Justice'
-import LaudryIcon from 'cozy-ui/transpiled/react/Icons/Laudry'
-import LightningIcon from 'cozy-ui/transpiled/react/Icons/Lightning'
-import NoteIcon from 'cozy-ui/transpiled/react/Icons/Note'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import PlaneIcon from 'cozy-ui/transpiled/react/Icons/Plane'
-import RemboursementIcon from 'cozy-ui/transpiled/react/Icons/Remboursement'
-import RestaurantIcon from 'cozy-ui/transpiled/react/Icons/Restaurant'
-import SchoolIcon from 'cozy-ui/transpiled/react/Icons/School'
-import ShopIcon from 'cozy-ui/transpiled/react/Icons/Shop'
-import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
-import TelecomIcon from 'cozy-ui/transpiled/react/Icons/Telecom'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
-import WaterIcon from 'cozy-ui/transpiled/react/Icons/Water'
-import WorkIcon from 'cozy-ui/transpiled/react/Icons/Work'
 
 const IconByLabel = {
-  'bank-check': BankCheckIcon,
-  bank: BankIcon,
-  benefit: BenefitIcon,
-  bill: BillIcon,
-  car: CarIcon,
-  chess: ChessIcon,
-  child: ChildIcon,
-  dots: DotsIcon,
-  email: EmailIcon,
-  euro: EuroIcon,
-  exchange: ExchangeIcon,
-  'file-type-note': NoteIcon,
-  fitness: FitnessIcon,
-  globe: GlobeIcon,
-  gouv: GouvIcon,
-  heart: HeartIcon,
-  home: HomeIcon,
-  image: ImageIcon,
-  justice: JusticeIcon,
-  laudry: LaudryIcon,
-  lightning: LightningIcon,
-  people: PeopleIcon,
-  plane: PlaneIcon,
-  remboursement: RemboursementIcon,
-  restaurant: RestaurantIcon,
-  school: SchoolIcon,
-  shop: ShopIcon,
-  team: TeamIcon,
-  telecom: TelecomIcon,
-  telephone: TelephoneIcon,
-  water: WaterIcon,
-  work: WorkIcon
+  'bank-check': BankCheck,
+  bank: Bank,
+  benefit: Benefit,
+  bill: Bill,
+  car: Car,
+  chess: Chess,
+  child: Child,
+  dots: Dots,
+  email: Email,
+  euro: Euro,
+  exchange: Exchange,
+  'file-type-note': Note,
+  fitness: Fitness,
+  globe: Globe,
+  gouv: Gouv,
+  heart: Heart,
+  home: Home,
+  image: Image,
+  justice: Justice,
+  laudry: Laudry,
+  lightning: Lightning,
+  people: People,
+  plane: Plane,
+  remboursement: Remboursement,
+  restaurant: Restaurant,
+  school: School,
+  shop: Shop,
+  team: Team,
+  telecom: Telecom,
+  telephone: Telephone,
+  water: Water,
+  work: Work
 }
 
 const themeIconByLabel = {

package/src/Qualification/QualificationItem/index.jsx

@@ -1,9 +1,8 @@
+import { Icon, FileDuotone } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import ButtonBase from 'cozy-ui/transpiled/react/ButtonBase'
-import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import FileDuotoneIcon from 'cozy-ui/transpiled/react/Icons/FileDuotone'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
@@ -36,7 +35,7 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
           />
         ) : (
           <Icon
-            icon={FileDuotoneIcon}
+            icon={FileDuotone}
             size="32"
             color={
               isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
@@ -50,7 +49,12 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
 }
 
 QualificationItem.propTypes = {
-  icon: PropTypes.oneOfType([PropTypes.node, iconPropType]),
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.object,
+    PropTypes.func
+  ]),
   label: PropTypes.string,
   isSelected: PropTypes.bool,
   onClick: PropTypes.func

package/src/Qualification/QualificationModal/helpers.js

@@ -1,10 +1,9 @@
+import { Icon, Note } from '@linagora/twake-icons'
 import React from 'react'
 
 import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
 import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
 import { getBoundT } from 'cozy-client/dist/models/document/locales'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import NoteIcon from 'cozy-ui/transpiled/react/Icons/Note'
 
 import QualificationIcon from '../QualificationIcon'
 
@@ -27,7 +26,7 @@ export const makeOptions = lang => {
           item,
           title: qualifT(`Scan.items.${item.label}`),
           icon: isQualificationNote(item) ? (
-            <Icon icon={NoteIcon} color="#E049BF" size={16} />
+            <Icon icon={Note} color="#E049BF" size={16} />
           ) : (
             <QualificationIcon qualification={item.label} />
           )

package/src/SquareAppIcon/SquareAppIcon.spec.js

@@ -1,8 +1,7 @@
+import { Icon, Cozy } from '@linagora/twake-icons'
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 
 import SquareAppIcon from '.'
@@ -69,7 +68,7 @@ describe('SquareAppIcon component', () => {
       <Wrapper
         variant="shortcut"
         name="shortcut"
-        IconContent={<Icon data-testid="icon-content" icon={CozyIcon} />}
+        IconContent={<Icon data-testid="icon-content" icon={Cozy} />}
       />
     )
     expect(queryByTestId('icon-content')).toBeTruthy()
@@ -77,7 +76,7 @@ describe('SquareAppIcon component', () => {
 
   it('should render correctly an app with custom content', () => {
     const root = render(
-      <Wrapper name="custom icon" IconContent={<Icon icon={CozyIcon} />} />
+      <Wrapper name="custom icon" IconContent={<Icon icon={Cozy} />} />
     )
     expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
   })

package/src/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -21,16 +21,12 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
@@ -70,16 +66,12 @@ exports[`SquareAppIcon component should render an app correctly with the given n
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
@@ -119,16 +111,12 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
@@ -165,16 +153,9 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
           class="styles__onEnd___1mc8z"
         />
         <svg
-          class="styles__icon___23x3R"
-          height="16"
-          style="fill: var(--primaryColor);"
-          viewBox="0 0 14 14"
-          width="16"
-        >
-          <path
-            d="M6 8H1a.968.968 0 01-.713-.287A.968.968 0 010 7c0-.283.096-.52.287-.713A.968.968 0 011 6h5V1c0-.283.096-.52.287-.713A.968.968 0 017 0c.283 0 .52.096.713.287A.975.975 0 018 1v5h5c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0113 8H8v5c0 .283-.096.52-.287.713A.967.967 0 017 14a.967.967 0 01-.713-.287A.968.968 0 016 13V8z"
-          />
-        </svg>
+          color="var(--primaryColor)"
+          data-icon="true"
+        />
       </div>
       <span
         class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
@@ -211,31 +192,22 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
         class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular MuiBadge-colorError"
       >
         <svg
-          class="makeStyles-errorIcon-34 styles__icon___23x3R"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm.8 12H7.2v-1.6h1.6V12zm0-3.2H7.2V4h1.6v4.8z"
-          />
-        </svg>
+          class="makeStyles-errorIcon-34"
+          data-icon="true"
+          size="16"
+        />
       </span>
     </span>
     <span
@@ -271,16 +243,12 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
@@ -320,16 +288,12 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
           class="u-w-2 u-h-2"
         >
           <svg
-            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5 styles__icon___23x3R"
+            class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
+            color="var(--coolGrey)"
+            data-icon="true"
             height="100%"
-            style="fill: var(--coolGrey);"
-            viewBox="0 0 15 16"
             width="100%"
-          >
-            <path
-              d="M14.4 4L7.2 0 0 4v8l7.2 4 7.2-4V4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 00-4.64 0L2.472 4.456 7.2 1.832zm-.8 11.896l-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 006.4 11.096v2.632zM5.6 8c0-.88.72-1.6 1.6-1.6.88 0 1.6.72 1.6 1.6 0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6zM8 13.728v-2.624a3.193 3.193 0 002.4-3.096c0-.28-.032-.552-.104-.808L12.8 5.808v5.256L8 13.728z"
-            />
-          </svg>
+          />
         </div>
       </div>
       <span
@@ -377,15 +341,9 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
         style="background-color: var(--paperBackgroundColor); color: var(--iconTextColor); box-shadow: var(--shadow3);"
       >
         <svg
-          class="styles__icon___23x3R"
-          height="10"
-          viewBox="0 0 16 16"
-          width="10"
-        >
-          <path
-            d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222zM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778z"
-          />
-        </svg>
+          data-icon="true"
+          size="10"
+        />
       </div>
     </span>
   </span>
@@ -415,17 +373,8 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
           class="styles__onEnd___1mc8z"
         />
         <svg
-          class="styles__icon___23x3R"
-          height="16"
-          viewBox="0 0 52 52"
-          width="16"
-        >
-          <path
-            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"
-            fill="#297EF2"
-            fill-rule="evenodd"
-          />
-        </svg>
+          data-icon="true"
+        />
       </div>
       <span
         class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"

package/src/SquareAppIcon/index.jsx

@@ -1,3 +1,11 @@
+import {
+  Icon,
+  IconCheckAnimated,
+  IconCrossAnimated,
+  LinkOut,
+  Plus,
+  WarningCircle
+} from '@linagora/twake-icons'
 import cx from 'classnames'
 import get from 'lodash/get'
 import PropTypes from 'prop-types'
@@ -5,12 +13,6 @@ import React, { useEffect, useState } from 'react'
 
 import { nameToColor } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import Badge from 'cozy-ui/transpiled/react/Badge'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconCheckAnimated from 'cozy-ui/transpiled/react/Icons/IconCheckAnimated'
-import SvgIconCrossAnimated from 'cozy-ui/transpiled/react/Icons/IconCrossAnimated'
-import iconOut from 'cozy-ui/transpiled/react/Icons/LinkOut'
-import iconPlus from 'cozy-ui/transpiled/react/Icons/Plus'
-import iconWarning from 'cozy-ui/transpiled/react/Icons/WarningCircle'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -145,7 +147,7 @@ export const SquareAppIcon = ({
                 boxShadow: 'var(--shadow3)'
               }}
             >
-              <Icon size="10" icon={iconOut} />
+              <Icon size="10" icon={LinkOut} />
             </div>
           ) : null
         }
@@ -173,7 +175,7 @@ export const SquareAppIcon = ({
               <Icon
                 size={16}
                 className={cx(classes.errorIcon)}
-                icon={iconWarning}
+                icon={WarningCircle}
               />
             ) : (
               ''
@@ -215,14 +217,14 @@ export const SquareAppIcon = ({
                     icon={
                       animationState === 'success'
                         ? IconCheckAnimated
-                        : SvgIconCrossAnimated
+                        : IconCrossAnimated
                     }
                   />
                 )}
               </div>
 
               {variant === 'add' ? (
-                <Icon icon={iconPlus} color="var(--primaryColor)" />
+                <Icon icon={Plus} color="var(--primaryColor)" />
               ) : IconContent ? (
                 IconContent
               ) : (

package/src/Storage/StorageButton.jsx

@@ -1,11 +1,10 @@
+import { Icon, TwakeWorkplace } from '@linagora/twake-icons'
 import cx from 'classnames'
 import React from 'react'
 
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import TwakeWorkplaceIcon from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from './locales'
@@ -20,7 +19,7 @@ const StorageButton = ({ className }) => {
       className={cx('u-bdrs-4', className)}
       variant="secondary"
       label={t('Storage.increase')}
-      startIcon={<Icon icon={TwakeWorkplaceIcon} size={22} />}
+      startIcon={<Icon icon={TwakeWorkplace} size={22} />}
       size="small"
       height="auto"
       fullWidth

package/src/Storage/StorageProgress.jsx

@@ -1,9 +1,8 @@
+import { Icon, Cloud } from '@linagora/twake-icons'
 import React from 'react'
 
 import { useInstanceInfo } from 'cozy-client'
 import { makeDiskInfos } from 'cozy-client/dist/models/instance'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
 import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n, useExtendI18n } from 'twake-i18n'
@@ -29,7 +28,7 @@ const StorageProgress = () => {
       <div className="u-flex u-flex-items-center">
         <Icon
           className="u-mr-half"
-          icon={CloudIcon}
+          icon={Cloud}
           size={24}
           color="var(--iconTextColor)"
         />

package/src/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -19,7 +19,9 @@ const CozyThemeWithQuery = props => {
     return null
   }
 
-  return <DumbCozyTheme {...props} type={instance?.colorScheme} />
+  const _type = props.type || instance?.colorScheme
+
+  return <DumbCozyTheme {...props} type={_type} />
 }
 
 export default CozyThemeWithQuery

package/test/__mocks__/twake-icons.js

@@ -0,0 +1,23 @@
+const React = require('react')
+
+const Icon = ({ icon, iconRef, ...props }) =>
+  React.createElement('svg', { 'data-icon': true, ...props })
+
+const Sprite = () => null
+
+const getFileTypeIcon = () =>
+  function FileTypeIcon() {
+    return React.createElement('svg', { 'data-filetypeicon': true })
+  }
+
+const proxyHandler = {
+  get: function (target, prop) {
+    if (prop in target) return target[prop]
+    if (prop === 'default') return target.Icon
+    return function IconMock({ iconRef, ...props }) {
+      return React.createElement('svg', { 'data-mock-icon': prop, ...props })
+    }
+  }
+}
+
+module.exports = new Proxy({ Icon, Sprite, getFileTypeIcon }, proxyHandler)