cozy-ui 139.2.0 → 140.0.0

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "cozy-ui",
-  "version": "139.2.0",
+  "version": "140.0.0",
   "description": "Cozy apps UI SDK",
+  "engines": {
+    "node": "24.x"
+  },
   "main": "./index.js",
   "bin": {
     "rsg-screenshots": "./scripts/screenshots.js"
@@ -29,7 +32,7 @@
     "build:doc:kss": "NODE_OPTIONS=--openssl-legacy-provider kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
     "build:doc:react": "NODE_OPTIONS=--openssl-legacy-provider styleguidist build --config docs/styleguide.config.js",
     "build:types": "tsc -p tsconfig-build.json",
-    "build:all": "yarn makeSpriteAndPalette && yarn build && yarn build:css:all && yarn build:doc",
+    "build:all": "yarn makePalette && yarn build && yarn build:css:all && yarn build:doc",
     "build:js": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap react/ --out-dir transpiled/react --copy-files --no-copy-ignored --verbose",
     "build": "yarn build:types && yarn build:js",
     "clean:doc:kss": "rm -rf build/styleguide",
@@ -39,12 +42,11 @@
     "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'react/**/*.tsx' 'docs/styleguide.config.js'",
     "lint:stylus": "stylint stylus --config .stylintrc",
     "lint:md": "remark . -o -S",
-    "palette": "scripts/make-palette.sh",
+    "makePalette": "scripts/make-palette.sh",
     "prebuild:css": "mkdir -p dist/ && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:css:utils": "mkdir -p dist/",
     "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss",
-    "makeSpriteAndPalette": "npm-run-all --parallel sprite palette",
     "semantic-release": "semantic-release",
     "sprite": "scripts/make-icon-sprite.sh",
     "screenshots": "node scripts/screenshots.js --screenshot-dir ./screenshots --styleguide-url file://$(pwd)/build/react --kss-dir ./build/styleguide",
@@ -55,7 +57,6 @@
     "travis-deploy-once": "travis-deploy-once",
     "start:css:utils": "yarn build:css:utils --watch",
     "start:css": "yarn build:css --watch",
-    "prestart:doc": "yarn sprite",
     "start:doc": "NODE_OPTIONS=--openssl-legacy-provider env BUILD_ENV=watch-styleguidist styleguidist server --config docs/styleguide.config.js",
     "start:doc:kss": "nodemon --ext styl,md --watch stylus --exec 'yarn build:doc:kss && http-server build/styleguide -p 4242'",
     "start": "yarn build --watch",
@@ -77,6 +78,7 @@
     "@babel/helper-regex": "7.10.5",
     "@cozy/codemods": "^1.9.0",
     "@cozy/minilog": "^1.0.0",
+    "@linagora/twake-icons": "^2.6.2",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "9.0.1",
@@ -149,7 +151,6 @@
     "stylint": "1.5.9",
     "stylus": "0.56.0",
     "stylus-loader": "3.0.2",
-    "svg-sprite-loader": "4.1.6",
     "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
     "twake-i18n": "^0.3.0",
@@ -182,6 +183,7 @@
     "rooks": "7.14.1"
   },
   "peerDependencies": {
+    "@linagora/twake-icons": ">=2.6.2",
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.29.1",
     "react": "^16 || ^17 || ^18",

package/react/AccordionSummary/AccordionExpandIcon.jsx

@@ -1,8 +1,6 @@
+import { Icon, Bottom } from '@linagora/twake-icons'
 import React from 'react'
 
-import Icon from '../Icon'
-import BottomIcon from '../Icons/Bottom'
-
-const AccordionExpandIcon = () => <Icon icon={BottomIcon} width={12} />
+const AccordionExpandIcon = () => <Icon icon={Bottom} width={12} />
 
 export default AccordionExpandIcon

package/react/ActionsBar/Readme.md

@@ -13,10 +13,8 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import { makeActions, modify, emailTo, download, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
-import StarIcon from 'cozy-ui/transpiled/react/Icons/Star'
-import FlagIcon from 'cozy-ui/transpiled/react/Icons/FlagOutlined'
+import { Icon, FlagOutlined, Star } from '@linagora/twake-icons'
 
 const doc = {
   _id: 'id01',
@@ -47,8 +45,8 @@ const actions = makeActions([ modify, call, download, smsTo, emailTo ])
 
 const colors = ['default', 'inherit', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
 
-const StarIconComponent = () => <Icon className="u-mr-1" icon={StarIcon} />
-const FlagIconComponent = () => <Icon className="u-mr-1" icon={FlagIcon} />
+const StarIconComponent = () => <Icon className="u-mr-1" icon={Star} />
+const FlagIconComponent = () => <Icon className="u-mr-1" icon={FlagOutlined} />
 
 const icons = {
   default: undefined,

package/react/ActionsBar/ResponsiveAction.jsx

@@ -1,7 +1,7 @@
+import { Icon } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import Button from '../Buttons'
-import Icon from '../Icon'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
 import { makeStyles } from '../styles'

package/react/ActionsBar/index.jsx

@@ -1,3 +1,10 @@
+import {
+  CheckCircle,
+  Cross,
+  CrossCircle,
+  Dots,
+  Icon
+} from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useRef, useState, useMemo } from 'react'
 import { useI18n } from 'twake-i18n'
@@ -10,12 +17,7 @@ import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
 import ActionsItems from '../ActionsMenu/ActionsItems'
 import AppBar from '../AppBar'
 import Box from '../Box'
-import Icon from '../Icon'
 import IconButton from '../IconButton'
-import CheckCircleIcon from '../Icons/CheckCircle'
-import CrossIcon from '../Icons/Cross'
-import CrossCircleIcon from '../Icons/CrossCircle'
-import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
@@ -69,7 +71,7 @@ const useStyles = makeStyles({
   })
 })
 
-const DefaultIcon = () => <Icon className="u-mr-1" icon={CheckCircleIcon} />
+const DefaultIcon = () => <Icon className="u-mr-1" icon={CheckCircle} />
 
 const SelectedCount = ({ docs, onClose, IconComponent }) => {
   const { isMobile } = useBreakpoints()
@@ -85,7 +87,7 @@ const SelectedCount = ({ docs, onClose, IconComponent }) => {
         color="text.primary"
       >
         <IconButton color="inherit" onClick={onClose}>
-          <Icon icon={CrossCircleIcon} />
+          <Icon icon={CrossCircle} />
         </IconButton>
         {docs.length}
       </Box>
@@ -149,7 +151,7 @@ const ActionsBar = ({
             onClick={onClose}
             color="inherit"
           >
-            <Icon icon={CrossIcon} />
+            <Icon icon={Cross} />
           </IconButton>
         )}
         <SelectedCount
@@ -182,7 +184,7 @@ const ActionsBar = ({
                   ref={anchorRef}
                   onClick={() => setShowMenu(true)}
                 >
-                  <Icon icon={DotsIcon} />
+                  <Icon icon={Dots} />
                 </IconButton>
               )}
               <ActionsMenu

package/react/ActionsMenu/Actions/addToFavorites.js

@@ -1,8 +1,7 @@
+import { Icon, StarOutline } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import StarOutlineIcon from '../../Icons/StarOutline'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const addToFavorites = ({ client, showAlert, splitFilename }) => {
   const { t } = getActionsI18n()
-  const icon = StarOutlineIcon
+  const icon = StarOutline
   const label = t('favorites.add.label')
 
   return {

package/react/ActionsMenu/Actions/call.js

@@ -1,15 +1,14 @@
+import { Icon, Telephone } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import TelephoneIcon from '../../Icons/Telephone'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const call = () => {
   const { t } = getActionsI18n()
-  const icon = TelephoneIcon
+  const icon = Telephone
   const label = t('call')
 
   return {

package/react/ActionsMenu/Actions/copyToClipboard.js

@@ -1,8 +1,7 @@
+import { Icon, Copy } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import CopyIcon from '../../Icons/Copy'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const copyToClipboard = () => {
   const { t } = getActionsI18n()
-  const icon = CopyIcon
+  const icon = Copy
   const label = t('copyToClipboard.copy')
 
   return {

package/react/ActionsMenu/Actions/download.js

@@ -1,8 +1,7 @@
+import { Icon, Download } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import DownloadIcon from '../../Icons/Download'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const download = ({ client, encryptedUrl, downloadFile }) => {
   const { t } = getActionsI18n()
-  const icon = DownloadIcon
+  const icon = Download
   const label = t('download')
 
   return {

package/react/ActionsMenu/Actions/editAttribute.js

@@ -1,8 +1,7 @@
+import { Icon, TextInfo } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import TextInfoIcon from '../../Icons/TextInfo'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const editAttribute = () => {
   const { t } = getActionsI18n()
-  const icon = TextInfoIcon
+  const icon = TextInfo
   const label = t('editAttribute')
 
   return {

package/react/ActionsMenu/Actions/emailTo.js

@@ -1,15 +1,14 @@
+import { Icon, Email } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import EmailIcon from '../../Icons/Email'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const emailTo = () => {
   const { t } = getActionsI18n()
-  const icon = EmailIcon
+  const icon = Email
   const label = t('emailTo')
 
   return {

package/react/ActionsMenu/Actions/exportToText.js

@@ -1,3 +1,4 @@
+import { Icon, Export } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import logger from 'cozy-logger'
@@ -5,8 +6,6 @@ import logger from 'cozy-logger'
 import { downloadBlob } from './helpers'
 import { getActionsI18n } from './locales/withActionsLocales'
 import { makePdfBlobFromText } from './pdfHelpers'
-import Icon from '../../Icon'
-import ExportIcon from '../../Icons/Export'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -30,7 +29,7 @@ const makeComponent = (label, icon) => {
 
 export const exportToText = ({ exportedText, file }) => {
   const { t } = getActionsI18n()
-  const icon = ExportIcon
+  const icon = Export
   const label = t('exportToText')
 
   return {

package/react/ActionsMenu/Actions/makeAction.jsx

@@ -1,6 +1,6 @@
+import { Icon } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
-import Icon from '../../Icon'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'

package/react/ActionsMenu/Actions/modify.js

@@ -1,15 +1,14 @@
+import { Icon, Pen } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import PenIcon from '../../Icons/Pen'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const modify = ({ client, generateWebLink }) => {
   const { t } = getActionsI18n()
-  const icon = PenIcon
+  const icon = Pen
   const label = t('modify')
 
   return {

package/react/ActionsMenu/Actions/others.jsx

@@ -1,5 +1,6 @@
+import { Dots } from '@linagora/twake-icons'
+
 import { getActionsI18n } from './locales/withActionsLocales'
-import DotsIcon from '../../Icons/Dots'
 
 export const others = () => {
   const { t } = getActionsI18n()
@@ -7,6 +8,6 @@ export const others = () => {
   return {
     name: 'others',
     label: t('others'),
-    icon: DotsIcon
+    icon: Dots
   }
 }

package/react/ActionsMenu/Actions/print.js

@@ -1,18 +1,17 @@
+import { Icon, Printer } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import logger from 'cozy-logger'
 
 import { makeBase64FromFile, makePdfBlob } from './helpers'
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import PrinterIcon from '../../Icons/Printer'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const print = ({ client, fetchBlobFileById, isFile }) => {
   const { t } = getActionsI18n()
-  const icon = PrinterIcon
+  const icon = Printer
   const label = t('print')
 
   return {

package/react/ActionsMenu/Actions/removeFromFavorites.js

@@ -1,8 +1,7 @@
+import { Icon, Star } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import StarIcon from '../../Icons/Star'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const removeFromFavorites = ({ client, showAlert, splitFilename }) => {
   const { t } = getActionsI18n()
-  const icon = StarIcon
+  const icon = Star
   const label = t('favorites.remove.label')
 
   return {

package/react/ActionsMenu/Actions/smsTo.js

@@ -1,15 +1,14 @@
+import { Icon, Comment } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import CommentIcon from '../../Icons/Comment'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const smsTo = () => {
   const { t } = getActionsI18n()
-  const icon = CommentIcon
+  const icon = Comment
   const label = t('smsTo')
 
   return {

package/react/ActionsMenu/Actions/viewInContacts.js

@@ -1,15 +1,14 @@
+import { Icon, Openapp } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import OpenappIcon from '../../Icons/Openapp'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
 export const viewInContacts = ({ client, generateWebLink }) => {
   const { t } = getActionsI18n()
-  const icon = OpenappIcon
+  const icon = Openapp
   const label = t('viewInContacts')
 
   return {

package/react/ActionsMenu/Actions/viewInDrive.js

@@ -1,8 +1,7 @@
+import { Icon, FolderOpen } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
 import { getActionsI18n } from './locales/withActionsLocales'
-import Icon from '../../Icon'
-import FolderOpenIcon from '../../Icons/FolderOpen'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -26,7 +25,7 @@ const makeComponent = (label, icon) => {
 
 export const viewInDrive = ({ client, generateWebLink }) => {
   const { t } = getActionsI18n()
-  const icon = FolderOpenIcon
+  const icon = FolderOpen
   const label = t('viewInDrive')
 
   return {

package/react/ActionsMenu/ActionsMenuButton.jsx

@@ -1,11 +1,10 @@
+import { Icon, Dots } from '@linagora/twake-icons'
 import React, { useState, useRef } from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import ActionsMenu from '.'
 import { locales } from './Actions/locales/withActionsLocales'
-import Icon from '../Icon'
 import IconButton from '../IconButton'
-import DotsIcon from '../Icons/Dots'
 import ListItemIcon from '../ListItemIcon'
 
 const ActionsMenuButton = ({ docs, actions }) => {
@@ -22,7 +21,7 @@ const ActionsMenuButton = ({ docs, actions }) => {
           arial-label={t('menu')}
           onClick={() => setShowActions(true)}
         >
-          <Icon icon={DotsIcon} />
+          <Icon icon={Dots} />
         </IconButton>
       </ListItemIcon>
       {showActions && (

package/react/ActionsMenu/Readme.md

@@ -9,7 +9,7 @@ A header `ActionsMenuMobileHeader` can be used to provide context on the menu ac
 An action is a simple function that returns an object with specific keys:
 
 * **name** : `<string>` – Action's name
-* **icon** : `<iconPropType>` – Action's icon
+* **icon** : `<string>|<object>|<func>` – Action's icon
 * **label** : `<string>` – Action's label
 * **disabled** : `<func>` – Used to add `disable` effect (the action is still displayed)
 * **displayCondition** : `<func>` – Whether the action is displayed. Must return a boolean
@@ -61,9 +61,7 @@ import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuIte
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import { File, FileTypeText, Icon } from '@linagora/twake-icons'
 
 import { makeActions, modify, emailTo, print, viewInContacts, viewInDrive, divider, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 
@@ -89,7 +87,7 @@ const customAction = () => ({
     return (
       <ActionsMenuItem {...props} ref={ref}>
         <ListItemIcon>
-          <Icon icon={FileIcon} />
+          <Icon icon={File} />
         </ListItemIcon>
         <ListItemText
           primary="This is a custom action, with a very long text to show how it is displayed"
@@ -149,17 +147,9 @@ import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuIte
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
-import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import AttachmentIcon from 'cozy-ui/transpiled/react/Icons/Attachment'
-import ContrastIcon from 'cozy-ui/transpiled/react/Icons/Contrast'
-import AttentionIcon from 'cozy-ui/transpiled/react/Icons/Attention'
+import { Attachment, Attention, Contrast, Copy, FileTypeText, Icon, Pen, People, Telephone } from '@linagora/twake-icons'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 
 initialState = { showMenu: isTesting() }
 
@@ -205,24 +195,24 @@ const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
       </ActionsMenuMobileHeader>
       <ActionsMenuItem autoFocus={true} onClick={() => alert('click')}>
         <ListItemIcon>
-          <Icon icon={PenIcon} />
+          <Icon icon={Pen} />
         </ListItemIcon>
         <ListItemText primary="Modify" />
         <ListItemIcon>
           <Typography color='error'>
-            <Icon icon={AttentionIcon} />
+            <Icon icon={Attention} />
           </Typography>
         </ListItemIcon>
       </ActionsMenuItem>
       <ActionsMenuItem>
         <ListItemIcon>
-          <Icon icon={PeopleIcon} />
+          <Icon icon={People} />
         </ListItemIcon>
         <ListItemText primary="People" />
       </ActionsMenuItem>
       <ActionsMenuItem>
         <ListItemIcon>
-          <Icon icon={AttachmentIcon} />
+          <Icon icon={Attachment} />
         </ListItemIcon>
         <ListItemText primary="Attachment" />
       </ActionsMenuItem>
@@ -234,19 +224,19 @@ const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
 
       <ActionsMenuItem>
         <ListItemIcon>
-          <Icon icon={TelephoneIcon} />
+          <Icon icon={Telephone} />
         </ListItemIcon>
         <ListItemText primary="Call" />
       </ActionsMenuItem>
       <ActionsMenuItem>
         <ListItemIcon>
-          <Icon icon={ContrastIcon} />
+          <Icon icon={Contrast} />
         </ListItemIcon>
         <ListItemText primary="Contrast" />
       </ActionsMenuItem>
       <ActionsMenuItem>
         <ListItemIcon>
-          <Icon icon={CopyIcon} />
+          <Icon icon={Copy} />
         </ListItemIcon>
         <ListItemText primary="Copy" />
       </ActionsMenuItem>

package/react/Alert/Readme.md

@@ -2,13 +2,10 @@
 import Alert from 'cozy-ui/transpiled/react/Alert'
 import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import { DeviceLaptop, Dots, Download, Icon } from '@linagora/twake-icons'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 import Variants from 'cozy-ui/docs/components/Variants'
-import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
-import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
 const initialVariants = [{
   longText: false,
@@ -34,11 +31,11 @@ const initialVariants = [{
       variant={variant.filled ? 'filled' : undefined}
       block={variant.block}
       square={variant.square}
-      icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
+      icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptop} color="var(--errorColor)" size={32} /> : undefined}
       action={(variant.actionOne || variant.actionTwo || variant.actionThree) ?
         <>
           {variant.actionOne &&
-            <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
+            <Button variant="text" size="small" label="Download" startIcon={<Icon icon={Download} />} />
           }
           {variant.actionTwo &&
             <Button variant="text" size="small" label="No, thanks!" />
@@ -46,7 +43,7 @@ const initialVariants = [{
           {variant.actionThree &&
             <ListItemIcon>
               <IconButton>
-                <Icon icon={DotsIcon} />
+                <Icon icon={Dots} />
               </IconButton>
             </ListItemIcon>
           }