cozy-ui-plus 8.0.1 → 9.0.0

package/dist/SquareAppIcon/index.js

@@ -13,6 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -25,18 +27,6 @@ var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
 
 var _Badge = _interopRequireDefault(require("cozy-ui/transpiled/react/Badge"));
 
-var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
-
-var _IconCheckAnimated = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/IconCheckAnimated"));
-
-var _IconCrossAnimated = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/IconCrossAnimated"));
-
-var _LinkOut = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/LinkOut"));
-
-var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
-
-var _WarningCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WarningCircle"));
-
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
@@ -188,9 +178,9 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
         color: 'var(--iconTextColor)',
         boxShadow: 'var(--shadow3)'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
       size: "10",
-      icon: _LinkOut.default
+      icon: _twakeIcons.LinkOut
     })) : null,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, 'u-mr-1', display === 'detailed')),
     overlap: "rectangular",
@@ -204,10 +194,10 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     animationState: animationState
   }), /*#__PURE__*/_react.default.createElement(_Badge.default, {
     className: (0, _classnames.default)(styles["SquareAppIcon-wrapper"], styles["SquareAppIcon-wrapper-".concat(variant)], styles["SquareAppIcon-wrapper--".concat(type)], (_cx3 = {}, (0, _defineProperty2.default)(_cx3, classes.squareAppIconGhost, exceptionVariant.includes(variant)), (0, _defineProperty2.default)(_cx3, classes.shadow, !exceptionVariant.includes(variant)), _cx3)),
-    badgeContent: variant === 'error' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    badgeContent: variant === 'error' ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
       size: 16,
       className: (0, _classnames.default)(classes.errorIcon),
-      icon: _WarningCircle.default
+      icon: _twakeIcons.WarningCircle
     }) : '',
     color: variant === 'error' ? 'error' : undefined,
     withBorder: false,
@@ -223,11 +213,11 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['onEnd'], (0, _defineProperty2.default)({}, styles['isSuccess'], animationState === 'success'), (0, _defineProperty2.default)({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
-  }, animationState && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, animationState && /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     size: 32,
-    icon: animationState === 'success' ? _IconCheckAnimated.default : _IconCrossAnimated.default
-  })), variant === 'add' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icon: _Plus.default,
+    icon: animationState === 'success' ? _twakeIcons.IconCheckAnimated : _twakeIcons.IconCrossAnimated
+  })), variant === 'add' ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.Plus,
     color: "var(--primaryColor)"
   }) : IconContent ? IconContent : /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2 u-h-2"

package/dist/Storage/StorageButton.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,10 +19,6 @@ var _instance = require("cozy-client/dist/models/instance");
 
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
 
-var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
-
-var _TwakeWorkplace = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/TwakeWorkplace"));
-
 var _twakeI18n = require("twake-i18n");
 
 var _locales = require("./locales");
@@ -37,8 +35,8 @@ var StorageButton = function StorageButton(_ref) {
     className: (0, _classnames.default)('u-bdrs-4', className),
     variant: "secondary",
     label: t('Storage.increase'),
-    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: _TwakeWorkplace.default,
+    startIcon: /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+      icon: _twakeIcons.TwakeWorkplace,
       size: 22
     }),
     size: "small",

package/dist/Storage/StorageProgress.js

@@ -7,16 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _cozyClient = require("cozy-client");
 
 var _instance = require("cozy-client/dist/models/instance");
 
-var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
-
-var _Cloud = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Cloud"));
-
 var _LinearProgress = _interopRequireDefault(require("cozy-ui/transpiled/react/LinearProgress"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
@@ -46,9 +44,9 @@ var StorageProgress = function StorageProgress() {
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex u-flex-items-center"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     className: "u-mr-half",
-    icon: _Cloud.default,
+    icon: _twakeIcons.Cloud,
     size: 24,
     color: "var(--iconTextColor)"
   }), /*#__PURE__*/_react.default.createElement(_Typography.default, {

package/dist/src/AppIcon/index.d.ts

@@ -16,8 +16,8 @@ export class AppIcon extends React.Component<any, any, any> {
 }
 export namespace AppIcon {
     namespace propTypes {
-        export let alt: PropTypes.Requireable<string>;
-        export let app: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
+        let alt: PropTypes.Requireable<string>;
+        let app: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
             name: PropTypes.Requireable<string>;
             slug: PropTypes.Requireable<string>;
             developer: PropTypes.Requireable<object>;
@@ -28,13 +28,13 @@ export namespace AppIcon {
                 version: PropTypes.Requireable<string>;
             }>>;
         }>>>;
-        export { iconPropType as fallbackIcon };
-        export let fetchIcon: PropTypes.Requireable<(...args: any[]) => any>;
-        export let client: PropTypes.Validator<object>;
-        export let className: PropTypes.Requireable<string>;
-        export let onReady: PropTypes.Requireable<(...args: any[]) => any>;
-        export let type: PropTypes.Requireable<string>;
-        export let priority: PropTypes.Requireable<string>;
+        let fallbackIcon: PropTypes.Requireable<NonNullable<string | object>>;
+        let fetchIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        let client: PropTypes.Validator<object>;
+        let className: PropTypes.Requireable<string>;
+        let onReady: PropTypes.Requireable<(...args: any[]) => any>;
+        let type: PropTypes.Requireable<string>;
+        let priority: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
         let type_1: string;
@@ -47,4 +47,3 @@ declare const _default: Function;
 export default _default;
 import React from 'react';
 import PropTypes from 'prop-types';
-import { iconPropType } from 'cozy-ui/transpiled/react/Icon';

package/dist/src/Contacts/AddModal/ContactAddressDialog/index.d.ts

@@ -10,7 +10,7 @@ declare namespace ContactAddressModal {
         let name: PropTypes.Validator<string>;
         let subFields: PropTypes.Validator<PropTypes.InferProps<{
             name: PropTypes.Requireable<string>;
-            icon: PropTypes.Requireable<string | object>;
+            icon: PropTypes.Requireable<NonNullable<string | object>>;
             type: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<PropTypes.InferProps<{
                 name: PropTypes.Requireable<string>;

package/dist/src/Contacts/AddModal/types.d.ts

@@ -51,7 +51,7 @@ export const labelPropTypes: PropTypes.Requireable<PropTypes.InferProps<{
 }>>;
 export const fieldInputAttributesTypes: PropTypes.Requireable<PropTypes.InferProps<{
     name: PropTypes.Requireable<string>;
-    icon: PropTypes.Requireable<string | object>;
+    icon: PropTypes.Requireable<NonNullable<string | object>>;
     type: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<PropTypes.InferProps<{
         name: PropTypes.Requireable<string>;

package/jest.config.js

@@ -11,7 +11,8 @@ module.exports = {
     '^cozy-client$': '<rootDir>/node_modules/cozy-client/dist/index',
     '^cozy-client/dist/types$':
       '<rootDir>/node_modules/cozy-client/dist/types.js',
-    '^cozy-ui(.*)': '<rootDir>/node_modules/cozy-ui/$1'
+    '^cozy-ui(.*)': '<rootDir>/node_modules/cozy-ui/$1',
+    '^@linagora/twake-icons$': '<rootDir>/test/__mocks__/twake-icons.js'
   },
   transformIgnorePatterns: ['node_modules/(?!(cozy-ui))'],
   testPathIgnorePatterns: ['node_modules', 'dist'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@babel/cli": "7.16.8",
     "@babel/core": "7.16.12",
+    "@linagora/twake-icons": "^2.6.2",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
@@ -64,6 +65,7 @@
     "rooks": "7.14.1"
   },
   "peerDependencies": {
+    "@linagora/twake-icons": ">=2.6.2",
     "cozy-client": ">=60.21.3",
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
@@ -74,5 +76,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "3a31e61d3085f7e5fbbc1ee6fb4e210c13e0c2ed"
+  "gitHead": "1526f0d72beb8a728568c4bccdf7e658b5c9e389"
 }

package/src/AppIcon/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, Cube } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import { withClient } from 'cozy-client'
-import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import CubeIcon from 'cozy-ui/transpiled/react/Icons/Cube'
 
 import styles from './styles.styl'
 import { isShortcutFile } from '../AppSections/helpers'
@@ -133,7 +132,7 @@ export class AppIcon extends Component {
               className
             )}
             height="100%"
-            icon={fallbackIcon || CubeIcon}
+            icon={fallbackIcon || Cube}
             width="100%"
             color="var(--coolGrey)"
             iconRef={this.props.iconRef}
@@ -148,7 +147,11 @@ AppIcon.propTypes = {
   /** Required if fetchIcon is not provided */
   app: PropTypes.oneOfType([AppDoctype, PropTypes.string]),
   /** Icon to fallback on error (optional), default cube icon */
-  fallbackIcon: iconPropType,
+  fallbackIcon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func
+  ]),
   /** Custom implementation of how to fetch icon */
   fetchIcon: PropTypes.func,
   client: PropTypes.object.isRequired,

package/src/AppIcon/index.spec.js

@@ -2,18 +2,20 @@
 
 'use strict'
 
+import { Icon } from '@linagora/twake-icons'
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-
 import { AppIcon } from '.'
 
-jest.mock('cozy-ui/transpiled/react/Icon', () => ({
-  ...jest.requireActual('cozy-ui/transpiled/react/Icon'),
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="icon-component"></div>)
-}))
+jest.mock('@linagora/twake-icons', () => {
+  const React = require('react')
+  return {
+    __esModule: true,
+    Icon: jest.fn(() => <div data-testid="icon-component" />),
+    Cube: () => null
+  }
+})
 
 describe('AppIcon component', () => {
   const app = {}

package/src/AppSections/components/DropdownFilter.jsx

@@ -1,9 +1,8 @@
+import { Icon, Bottom } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
 
 import styles from './DropdownFilter.styl'
@@ -11,7 +10,7 @@ import styles from './DropdownFilter.styl'
 const SmallArrow = () => (
   <Icon
     className={cx(styles.DropdownFilter__icon, 'u-mr-1')}
-    icon={BottomIcon}
+    icon={Bottom}
     color="var(--coolGrey)"
     width={16}
     height={16}

package/src/AppTile/index.jsx

@@ -1,9 +1,8 @@
+import { Icon, WrenchCircle } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import WrenchCircleIcon from 'cozy-ui/transpiled/react/Icons/WrenchCircle'
 import Tile, {
   TileTitle,
   TileSubtitle,
@@ -96,7 +95,7 @@ export const AppTile = ({
         {isInMaintenanceWithSpecificDisplay && (
           <Icon
             data-testid="icon-maintenance"
-            icon={WrenchCircleIcon}
+            icon={WrenchCircle}
             color="var(--coolGrey)"
             className={styles['AppTile-icon-maintenance']}
           />

package/src/CipherIcon/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, Keychain } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { withClient } from 'cozy-client'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
 
 import AppIcon from '../AppIcon'
 import { AppDoctype } from '../proptypes'
@@ -30,7 +29,7 @@ class CipherIcon extends React.PureComponent {
 
     return (
       <div className={cx('u-dib u-pos-relative', className)} {...rest}>
-        <Icon icon={KeychainIcon} size={32} />
+        <Icon icon={Keychain} size={32} />
         <div className="u-pos-absolute u-right-0 u-bottom-0">
           <AppIcon fetchIcon={this.fetchIcon} className="u-w-1 u-h-1" />
         </div>

package/src/CollectionField/index.jsx

@@ -1,9 +1,7 @@
+import { Icon, CrossSmall, Plus } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
@@ -89,9 +87,7 @@ const CollectionField = props => {
                     label={removeButtonLabel}
                     iconOnly
                     round
-                    icon={
-                      <Icon icon={CrossSmallIcon} color="var(--slateGrey)" />
-                    }
+                    icon={<Icon icon={CrossSmall} color="var(--slateGrey)" />}
                     onClick={() => handleRemove(index)}
                   />
                 </div>
@@ -106,7 +102,7 @@ const CollectionField = props => {
             theme="text"
             icon={
               <Icon
-                icon={PlusIcon}
+                icon={Plus}
                 className={styles.CollectionField__addBtnIcon}
               />
             }

package/src/Contacts/AddModal/ContactForm/FieldInputAccordion.jsx

@@ -1,9 +1,7 @@
+import { Icon, Dropdown, Dropup } from '@linagora/twake-icons'
 import React, { useState } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import DropdownIcon from 'cozy-ui/transpiled/react/Icons/Dropdown'
-import DropupIcon from 'cozy-ui/transpiled/react/Icons/Dropup'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInput from './FieldInput'
@@ -38,7 +36,7 @@ const FieldInputAccordion = ({
           size="medium"
           onClick={() => setShowExtended(v => !v)}
         >
-          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
+          <Icon icon={showExtended ? Dropup : Dropdown} />
         </IconButton>
       </div>
       {subFields.map(({ name, ...attributes }, index) => {

package/src/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -1,10 +1,9 @@
+import { Icon, Plus } from '@linagora/twake-icons'
 import cx from 'classnames'
 import React from 'react'
 import { FieldArray } from 'react-final-form-arrays'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInput from './FieldInput'
@@ -63,7 +62,7 @@ const FieldInputArray = ({
             })}
             <Button
               variant="text"
-              startIcon={<Icon icon={PlusIcon} />}
+              startIcon={<Icon icon={Plus} />}
               onClick={() => addField(fields)}
               label={t(`Contacts.AddModal.ContactForm.addLabel.${name}`)}
             />

package/src/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -1,8 +1,8 @@
+import { Icon } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInput from './FieldInput'

package/src/Contacts/AddModal/ContactForm/RemoveButton.jsx

@@ -1,15 +1,14 @@
+import { Icon, CrossCircle } from '@linagora/twake-icons'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 
 const RemoveButton = ({ onRemove }) => {
   return (
     <ListItemIcon className="u-ml-half">
       <IconButton aria-label="delete" size="medium" onClick={onRemove}>
-        <Icon icon={CrossCircleIcon} />
+        <Icon icon={CrossCircle} />
       </IconButton>
     </ListItemIcon>
   )

package/src/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -1,17 +1,19 @@
+import {
+  Icon,
+  Bottom,
+  Calendar,
+  Cloud,
+  Comment,
+  Company,
+  Email,
+  Location,
+  Matrix,
+  People,
+  Relationship,
+  Telephone
+} from '@linagora/twake-icons'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
-import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
-import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
-import CommentIcon from 'cozy-ui/transpiled/react/Icons/Comment'
-import CompanyIcon from 'cozy-ui/transpiled/react/Icons/Company'
-import EmailIcon from 'cozy-ui/transpiled/react/Icons/Email'
-import LocationIcon from 'cozy-ui/transpiled/react/Icons/Location'
-import MatrixIcon from 'cozy-ui/transpiled/react/Icons/Matrix'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import RelationshipIcon from 'cozy-ui/transpiled/react/Icons/Relationship'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 
 import TextFieldPhone from './TextFieldPhone/index'
@@ -22,7 +24,7 @@ import TextFieldPhone from './TextFieldPhone/index'
 export const fields = [
   {
     name: 'gender',
-    icon: PeopleIcon,
+    icon: People,
     select: true,
     options: [
       {
@@ -62,7 +64,7 @@ export const fields = [
   },
   {
     name: 'company',
-    icon: CompanyIcon,
+    icon: Company,
     type: 'text',
     layout: 'accordion',
     subFields: [
@@ -75,7 +77,7 @@ export const fields = [
   },
   {
     name: 'phone',
-    icon: TelephoneIcon,
+    icon: Telephone,
     type: 'tel',
     layout: 'array',
     component: TextFieldPhone,
@@ -119,7 +121,7 @@ export const fields = [
   },
   {
     name: 'email',
-    icon: EmailIcon,
+    icon: Email,
     type: 'email',
     layout: 'array',
     label: {
@@ -146,12 +148,12 @@ export const fields = [
   },
   {
     name: 'matrix',
-    icon: MatrixIcon,
+    icon: Matrix,
     type: 'text'
   },
   {
     name: 'address',
-    icon: LocationIcon,
+    icon: Location,
     type: 'text',
     layout: 'array',
     InputProps: {
@@ -243,13 +245,13 @@ export const fields = [
   },
   {
     name: 'note',
-    icon: CommentIcon,
+    icon: Comment,
     type: 'text',
     multiline: true
   },
   {
     name: 'cozy',
-    icon: CloudIcon,
+    icon: Cloud,
     type: 'url',
     isSecondary: true,
     label: {
@@ -276,7 +278,7 @@ export const fields = [
   },
   {
     name: 'birthday',
-    icon: CalendarIcon,
+    icon: Calendar,
     type: 'date',
     isSecondary: true,
     InputLabelProps: { shrink: true }
@@ -289,14 +291,14 @@ export const fields = [
   },
   {
     name: 'relatedContact',
-    icon: RelationshipIcon,
+    icon: Relationship,
     layout: 'array',
     isSecondary: true,
     InputProps: {
       readOnly: true,
       endAdornment: (
         <InputAdornment position="end">
-          <Icon icon={BottomIcon} color="var(--iconTextColor)" />
+          <Icon icon={Bottom} color="var(--iconTextColor)" />
         </InputAdornment>
       )
     },

package/src/Contacts/AddModal/types.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types'
 
-import { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-
 /**
  * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
  */
@@ -64,7 +62,11 @@ export const labelPropTypes = PropTypes.shape({
 
 export const fieldInputAttributesTypes = PropTypes.shape({
   name: PropTypes.string,
-  icon: iconPropType,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func
+  ]),
   type: PropTypes.string,
   label: labelPropTypes,
   layout: PropTypes.string,

package/src/Contacts/GroupsSelect/GroupCreation.jsx

@@ -1,8 +1,7 @@
+import { Icon, Plus } from '@linagora/twake-icons'
 import classNames from 'classnames'
 import React, { Component } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
 import { translate } from 'twake-i18n'
 
@@ -66,7 +65,7 @@ class GroupCreation extends Component {
               onClick={this.handleClick}
               className={styles['contact-group-create-div-icon']}
             >
-              <Icon icon={PlusIcon} />
+              <Icon icon={Plus} />
               <span className="u-pl-half">
                 {t('Contacts.GroupsSelect.create')}
               </span>

package/src/Contacts/GroupsSelect/SelectBox/Control.jsx

@@ -1,9 +1,8 @@
+import { Icon, BottomSelect } from '@linagora/twake-icons'
 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 BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from '../locales'
@@ -24,7 +23,7 @@ const Control = ({
         onClick={onControlClicked}
         onTouchStart={onControlClicked}
         label={t('Contacts.GroupsSelect.manage')}
-        startIcon={<Icon icon={BottomSelectIcon} width="12" />}
+        startIcon={<Icon icon={BottomSelect} width="12" />}
       />
     </div>
   )