cozy-ui-plus 8.0.1 → 9.0.0

package/src/Contacts/Header/ImportDropdown.jsx

@@ -1,11 +1,9 @@
+import { Icon, Bottom, Team } from '@linagora/twake-icons'
 import React, { useState, useRef } from 'react'
 
 import { useClient, generateWebLink } from 'cozy-client'
 import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
-import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
 import Link from 'cozy-ui/transpiled/react/Link'
 import ActionMenu, {
   ActionMenuItem
@@ -37,7 +35,7 @@ const ImportDropdown = ({ onContactImport }) => {
         ref={anchorRef}
         variant="secondary"
         label={t('Contacts.Header.import.title')}
-        endIcon={<Icon icon={BottomIcon} />}
+        endIcon={<Icon icon={Bottom} />}
         fullWidth
         onClick={() => setShowMenu(v => !v)}
       />
@@ -48,10 +46,7 @@ const ImportDropdown = ({ onContactImport }) => {
           popperOptions={{ placement: 'bottom-end' }}
           onClose={() => setShowMenu(false)}
         >
-          <ActionMenuItem
-            left={<Icon icon={TeamIcon} />}
-            onClick={onContactImport}
-          >
+          <ActionMenuItem left={<Icon icon={Team} />} onClick={onContactImport}>
             {t('Contacts.Header.import.vcard')}
           </ActionMenuItem>
 

package/src/Contacts/Header/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, PersonAdd } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PersonAddIcon from 'cozy-ui/transpiled/react/Icons/PersonAdd'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
@@ -37,7 +36,7 @@ const Header = ({
         <Button
           className="u-mr-half"
           variant="ghost"
-          startIcon={<Icon icon={PersonAddIcon} />}
+          startIcon={<Icon icon={PersonAdd} />}
           label={t('Contacts.Header.create')}
           fullWidth
           onClick={onContactCreate}

package/src/ContactsListModal/AddContact/AddContactContent.jsx

@@ -1,8 +1,7 @@
+import { Icon, People } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
@@ -21,7 +20,7 @@ const AddContactContent = ({ t, setContactValues }) => {
       <Typography variant="h5">{t('coordinates')}</Typography>
       <Media>
         <Img className={styles.icon}>
-          <Icon icon={PeopleIcon} />
+          <Icon icon={People} />
         </Img>
         <Bd className="u-mr-1">
           <TextField

package/src/ContactsListModal/ContactsListModal.jsx

@@ -1,3 +1,4 @@
+import { Icon, Plus } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -10,8 +11,6 @@ import {
   useCozyDialog
 } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { DialogTitle, DialogContent } from 'cozy-ui/transpiled/react/Dialog'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener'
 import useRealtime from 'cozy-ui/transpiled/react/hooks/useRealtime'
@@ -97,9 +96,9 @@ const ContactsListModal = ({
               className={isMobile && 'u-mt-1'}
               variant="secondary"
               theme="secondary"
-              label={selfAddContactLabel || <Icon icon={PlusIcon} />}
+              label={selfAddContactLabel || <Icon icon={Plus} />}
               {...(selfAddContactLabel && {
-                startIcon: <Icon icon={PlusIcon} />
+                startIcon: <Icon icon={Plus} />
               })}
               onClick={setShowAddDialog}
             />

package/src/ContactsListModal/MobileHeader.jsx

@@ -1,9 +1,8 @@
+import { Icon, Previous } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import Input from 'cozy-ui/transpiled/react/Input'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
@@ -20,7 +19,7 @@ const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
       style={barStyle}
     >
       <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
-        <Icon icon={PreviousIcon} />
+        <Icon icon={Previous} />
       </IconButton>
       <Input
         type="text"

package/src/Dialogs/AuthentificationDialog/index.jsx

@@ -1,10 +1,10 @@
+import { CozyAuthentification } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useMemo, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import PermissionDialog from 'cozy-ui/transpiled/react/CozyDialogs/PermissionDialog'
-import CozyAuthentificationIcon from 'cozy-ui/transpiled/react/Icons/CozyAuthentification'
 import PasswordField from 'cozy-ui/transpiled/react/PasswordField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
@@ -49,7 +49,7 @@ const AuthentificationDialog = ({
       open
       onClose={onClose}
       title={t(`authentification-dialog.${isOIDC ? 'title-oidc' : 'title'}`)}
-      icon={CozyAuthentificationIcon}
+      icon={CozyAuthentification}
       content={
         <form onSubmit={handleSubmit}>
           <Typography variant="body1" className="u-ta-center">

package/src/FilePicker/FilePickerBodyItem.jsx

@@ -1,3 +1,4 @@
+import { Icon, FileTypeFolder, FileTypeText } from '@linagora/twake-icons'
 import cx from 'classnames'
 import filesize from 'filesize'
 import PropTypes from 'prop-types'
@@ -6,9 +7,6 @@ import React from 'react'
 import { models } from 'cozy-client'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import Divider from 'cozy-ui/transpiled/react/Divider'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileTypeFolder from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/FilePicker/FilePickerBreadcrumb.jsx

@@ -1,8 +1,7 @@
+import { Icon, Right } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { Fragment, useCallback, memo } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
@@ -33,7 +32,7 @@ const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
                       {folder.name}
                     </span>
                     <Icon
-                      icon={RightIcon}
+                      icon={Right}
                       className={styles['filePickerBreadcrumb-icon']}
                     />
                   </Fragment>

package/src/FilePicker/FilePickerHeader.jsx

@@ -1,12 +1,11 @@
+import { Icon, Previous } from '@linagora/twake-icons'
 import get from 'lodash/get'
 import uniqBy from 'lodash/uniqBy'
 import PropTypes from 'prop-types'
 import React, { useCallback, memo } from 'react'
 
 import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { ROOT_DIR_ID } from '.'

package/src/ListItem/ExpandedAttributes/ExpandedAttribute.jsx

@@ -1,8 +1,7 @@
+import { Icon, Copy } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
@@ -21,7 +20,7 @@ const ExpandedAttribute = ({ label, value, setAlertProps }) => {
       onClick={copyToClipboard({ value, setAlertProps, t })}
     >
       <ListItemIcon>
-        <Icon icon={CopyIcon} />
+        <Icon icon={Copy} />
       </ListItemIcon>
       <ListItemText
         primary={<Typography variant="caption">{label}</Typography>}

package/src/ListItem/ListItemBase/index.jsx

@@ -1,12 +1,11 @@
+import { Icon, Dots } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
@@ -58,7 +57,7 @@ const ListItemBase = ({
         {actions && !isSelectActive && (
           <ListItemSecondaryAction>
             <IconButton ref={anchorRef} onClick={toggleMenu}>
-              <Icon icon={DotsIcon} />
+              <Icon icon={Dots} />
             </IconButton>
           </ListItemSecondaryAction>
         )}

package/src/ListItem/ListItemContact/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, Contacts } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getDisplayName } from 'cozy-client/dist/models/contact'
 import Filename from 'cozy-ui/transpiled/react/Filename'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import ContactsIcon from 'cozy-ui/transpiled/react/Icons/Contacts'
 
 import useActions from './useActions'
 import ListItemBase from '../ListItemBase'
@@ -22,7 +21,7 @@ const ListItemContact = ({
   const defaultActions = useActions(contact)
   const primaryText = primary || getDisplayName(contact)
   const secondaryText = secondary || contact.email?.[0]?.address
-  const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
+  const itemIcon = icon || <Icon icon={Contacts} width="32" height="32" />
 
   const itemActions = defaultActions.concat(actions)
 
@@ -34,7 +33,7 @@ const ListItemContact = ({
       icon={itemIcon}
       actions={itemActions}
       actionMenuComp={{
-        Header: <Filename icon={ContactsIcon} filename={primaryText} />
+        Header: <Filename icon={Contacts} filename={primaryText} />
       }}
       selectProps={selectProps}
       expandedAttributesProps={expandedAttributesProps}

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -1,11 +1,9 @@
+import { Icon, FileTypeNote, FileTypeText } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
 import { isNote } from 'cozy-client/dist/models/file'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
-import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
 
 import FileImageLoader from '../../FileImageLoader'
@@ -42,7 +40,7 @@ const ItemIcon = ({ icon, file }) => {
       }}
       renderFallback={() => (
         <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
-          <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
+          <Icon icon={isNote(file) ? FileTypeNote : FileTypeText} />
         </div>
       )}
     />

package/src/ListItem/ListItemFile/index.jsx

@@ -1,9 +1,9 @@
+import { FileTypePdf } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 import Filename from 'cozy-ui/transpiled/react/Filename'
-import FiletypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
 
 import ItemIcon from './ItemIcon'
 import PrimaryText from './PrimaryText'
@@ -35,7 +35,7 @@ const ListItemFile = ({
       actionMenuComp={{
         Header: (
           <Filename
-            icon={FiletypePdfIcon}
+            icon={FileTypePdf}
             filename={filename}
             extension={extension}
           />

package/src/Paywall/Paywall.jsx

@@ -1,3 +1,4 @@
+import { Icon, CozyUpgrade } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 
@@ -7,8 +8,6 @@ import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CozyUpgradeIcon from 'cozy-ui/transpiled/react/Icons/CozyUpgrade'
 import Markdown from 'cozy-ui/transpiled/react/Markdown'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -77,7 +76,7 @@ const Paywall = ({
       actionsLayout="column"
       title={
         <div className="u-flex u-flex-column u-flex-items-center">
-          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
+          <Icon icon={CozyUpgrade} width={128} height={128} />
           <Typography variant="h3" className="u-mt-1">
             {t(`${variant}Paywall.${type}.title`)}
           </Typography>

package/src/Qualification/QualificationGrid/index.jsx

@@ -1,17 +1,19 @@
+import {
+  Bank,
+  Bill,
+  Car,
+  Chess,
+  Dots,
+  Heart,
+  Home,
+  People,
+  Team,
+  Work
+} from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { Fragment, useState } from 'react'
 
 import Grid from 'cozy-ui/transpiled/react/Grid'
-import BankIcon from 'cozy-ui/transpiled/react/Icons/Bank'
-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 DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
-import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
-import HomeIcon from 'cozy-ui/transpiled/react/Icons/Home'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
-import WorkIcon from 'cozy-ui/transpiled/react/Icons/Work'
 import { useI18n } from 'twake-i18n'
 
 import { getThemesList } from './helpers'
@@ -19,16 +21,16 @@ import QualificationItem from '../QualificationItem'
 import withLocales from './locales/withLocales'
 
 const IconByName = {
-  people: PeopleIcon,
-  team: TeamIcon,
-  work: WorkIcon,
-  heart: HeartIcon,
-  home: HomeIcon,
-  car: CarIcon,
-  chess: ChessIcon,
-  bank: BankIcon,
-  bill: BillIcon,
-  dots: DotsIcon
+  people: People,
+  team: Team,
+  work: Work,
+  heart: Heart,
+  home: Home,
+  car: Car,
+  chess: Chess,
+  bank: Bank,
+  bill: Bill,
+  dots: Dots
 }
 
 const QualificationGrid = ({ noUndefined, noOthers, noHealth, onClick }) => {

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()
   })