cozy-ui-plus 8.0.0 → 9.0.0

package/dist/Qualification/QualificationItem/index.js

@@ -11,26 +11,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _ButtonBase = _interopRequireDefault(require("cozy-ui/transpiled/react/ButtonBase"));
 
-var _Icon = _interopRequireWildcard(require("cozy-ui/transpiled/react/Icon"));
-
-var _FileDuotone = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileDuotone"));
-
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var _excluded = ["icon", "label", "isSelected", "onClick"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var useStyles = (0, _styles.makeStyles)({
   item: {
     display: 'flex',
@@ -61,11 +54,11 @@ var QualificationItem = function QualificationItem(_ref2) {
     onClick: onClick
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-mb-half"
-  }, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, icon ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: icon,
     color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icon: _FileDuotone.default,
+  }) : /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.FileDuotone,
     size: "32",
     color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
   })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -74,7 +67,7 @@ var QualificationItem = function QualificationItem(_ref2) {
 };
 
 QualificationItem.propTypes = {
-  icon: _propTypes.default.oneOfType([_propTypes.default.node, _Icon.iconPropType]),
+  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object, _propTypes.default.func]),
   label: _propTypes.default.string,
   isSelected: _propTypes.default.bool,
   onClick: _propTypes.default.func

package/dist/Qualification/QualificationModal/helpers.js

@@ -9,6 +9,8 @@ exports.searchOptionsFn = exports.makeSearchOptions = exports.makeOptions = void
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _documentTypeData = require("cozy-client/dist/models/document/documentTypeData");
@@ -17,10 +19,6 @@ var _documentTypeDataHelpers = require("cozy-client/dist/models/document/documen
 
 var _locales = require("cozy-client/dist/models/document/locales");
 
-var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
-
-var _Note = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Note"));
-
 var _QualificationIcon = _interopRequireDefault(require("../QualificationIcon"));
 
 var makeOptions = function makeOptions(lang) {
@@ -42,8 +40,8 @@ var makeOptions = function makeOptions(lang) {
             id: item.label,
             item: item,
             title: qualifT("Scan.items.".concat(item.label)),
-            icon: (0, _documentTypeDataHelpers.isQualificationNote)(item) ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-              icon: _Note.default,
+            icon: (0, _documentTypeDataHelpers.isQualificationNote)(item) ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+              icon: _twakeIcons.Note,
               color: "#E049BF",
               size: 16
             }) : /*#__PURE__*/_react.default.createElement(_QualificationIcon.default, {

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/providers/CozyTheme/CozyThemeWithQuery.js

@@ -32,8 +32,10 @@ var CozyThemeWithQuery = function CozyThemeWithQuery(props) {
     return null;
   }
 
+  var _type = props.type || (instance === null || instance === void 0 ? void 0 : instance.colorScheme);
+
   return /*#__PURE__*/_react.default.createElement(_CozyTheme.default, (0, _extends2.default)({}, props, {
-    type: instance === null || instance === void 0 ? void 0 : instance.colorScheme
+    type: _type
   }));
 };
 

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.0",
+  "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": "e0e319b6aa9ff9125441b43c1c68d31ea6b25103"
+  "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>
   )