make a map between DS icons and component icons

packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -3,7 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Flex, Icon } from '@strapi/design-system';
-import * as Icons from '@strapi/icons';
+import { Cube } from '@strapi/icons';
+import COMPONENT_ICONS from '../../utils/componentIcons';
 
 const WIDTH_S = 5;
 const WIDTH_M = 8;
@@ -29,7 +30,7 @@ export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
       size={size}
       showBackground={showBackground}
     >
-      <Icon as={Icons[icon] || Icons.Cube} />
+      <Icon as={COMPONENT_ICONS[icon] || Cube} />
     </Wrapper>
   );
 }
@@ -37,7 +38,7 @@ export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
 ComponentIcon.defaultProps = {
   showBackground: true,
   size: 'M',
-  icon: 'Cube',
+  icon: null,
 };
 
 ComponentIcon.propTypes = {

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js

@@ -62,7 +62,7 @@ export default function ComponentCard({ children, onClick, icon }) {
 
 ComponentCard.defaultProps = {
   onClick() {},
-  icon: 'Cube',
+  icon: null,
 };
 
 ComponentCard.propTypes = {

packages/core/admin/admin/src/content-manager/utils/componentIcons.js

@@ -0,0 +1,143 @@
+import * as Icons from '@strapi/icons';
+
+const COMPONENT_ICONS = {
+    alien: Icons.Alien,
+    apps: Icons.Apps,
+    archive: Icons.Archive,
+    arrowDown: Icons.ArrowDown,
+    arrowLeft: Icons.ArrowLeft,
+    arrowRight: Icons.ArrowRight,
+    arrowUp: Icons.ArrowUp,
+    attachment: Icons.Attachment,
+    bell: Icons.Bell,
+    bold: Icons.Bold,
+    book: Icons.Book,
+    briefcase: Icons.Briefcase,
+    brush: Icons.Brush,
+    bulletList: Icons.BulletList,
+    calendar: Icons.Calendar,
+    car: Icons.Car,
+    cast: Icons.Cast,
+    chartBubble: Icons.ChartBubble,
+    chartCircle: Icons.ChartCircle,
+    chartPie: Icons.ChartPie,
+    check: Icons.Check,
+    clock: Icons.Clock,
+    cloud: Icons.Cloud,
+    code: Icons.Code,
+    cog: Icons.Cog,
+    collapse: Icons.Collapse,
+    command: Icons.Command,
+    connector: Icons.Connector,
+    crop: Icons.Crop,
+    cross: Icons.Cross,
+    crown: Icons.Crown,
+    cup: Icons.Cup,
+    cursor: Icons.Cursor,
+    dashboard: Icons.Dashboard,
+    database: Icons.Database,
+    discord: Icons.Discord,
+    discuss: Icons.Discuss,
+    doctor: Icons.Doctor,
+    download: Icons.Download,
+    drag: Icons.Drag,
+    duplicate: Icons.Duplicate,
+    earth: Icons.Earth,
+    emotionHappy: Icons.EmotionHappy,
+    emotionUnhappy: Icons.EmotionUnhappy,
+    envelop: Icons.Envelop,
+    exit: Icons.Exit,
+    expand: Icons.Expand,
+    eye: Icons.Eye,
+    facebook: Icons.Facebook,
+    feather: Icons.Feather,
+    file: Icons.File,
+    fileError: Icons.FileError,
+    filePdf: Icons.FilePdf,
+    filter: Icons.Filter,
+    folder: Icons.Folder,
+    gate: Icons.Gate,
+    gift: Icons.Gift,
+    github: Icons.Github,
+    globe: Icons.Globe,
+    graphQl: Icons.GraphQl,
+    grid: Icons.Grid,
+    handHeart: Icons.HandHeart,
+    hashtag: Icons.Hashtag,
+    headphone: Icons.Headphone,
+    heart: Icons.Heart,
+    house: Icons.House,
+    information: Icons.Information,
+    italic: Icons.Italic,
+    key: Icons.Key,
+    landscape: Icons.Landscape,
+    layer: Icons.Layer,
+    layout: Icons.Layout,
+    lightbulb: Icons.Lightbulb,
+    link: Icons.Link,
+    lock: Icons.Lock,
+    magic: Icons.Magic,
+    manyToMany: Icons.ManyToMany,
+    manyToOne: Icons.ManyToOne,
+    manyWays: Icons.ManyWays,
+    medium: Icons.Medium,
+    message: Icons.Message,
+    microphone: Icons.Microphone,
+    monitor: Icons.Monitor,
+    moon: Icons.Moon,
+    music: Icons.Music,
+    oneToMany: Icons.OneToMany,
+    oneToOne: Icons.OneToOne,
+    oneWay: Icons.OneWay,
+    paint: Icons.Paint,
+    paintBrush: Icons.PaintBrush,
+    paperPlane: Icons.PaperPlane,
+    pencil: Icons.Pencil,
+    phone: Icons.Phone,
+    picture: Icons.Picture,
+    pin: Icons.Pin,
+    pinMap: Icons.PinMap,
+    plane: Icons.Plane,
+    play: Icons.Play,
+    plus: Icons.Plus,
+    priceTag: Icons.PriceTag,
+    puzzle: Icons.Puzzle,
+    question: Icons.Question,
+    quote: Icons.Quote,
+    reddit: Icons.Reddit,
+    refresh: Icons.Refresh,
+    repeat: Icons.Repeat,
+    restaurant: Icons.Restaurant,
+    rocket: Icons.Rocket,
+    rotate: Icons.Rotate,
+    scissors: Icons.Scissors,
+    search: Icons.Search,
+    seed: Icons.Seed,
+    server: Icons.Server,
+    shield: Icons.Shield,
+    shirt: Icons.Shirt,
+    shoppingCart: Icons.ShoppingCart,
+    slideshow: Icons.Slideshow,
+    stack: Icons.Stack,
+    star: Icons.Star,
+    store: Icons.Store,
+    strikeThrough: Icons.StrikeThrough,
+    sun: Icons.Sun,
+    television: Icons.Television,
+    thumbDown: Icons.ThumbDown,
+    thumbUp: Icons.ThumbUp,
+    train: Icons.Train,
+    trash: Icons.Trash,
+    twitter: Icons.Twitter,
+    typhoon: Icons.Typhoon,
+    underline: Icons.Underline,
+    upload: Icons.Upload,
+    user: Icons.User,
+    volumeMute: Icons.VolumeMute,
+    volumeUp: Icons.VolumeUp,
+    walk: Icons.Walk,
+    wheelchair: Icons.Wheelchair,
+    write: Icons.Write,
+};
+
+export default COMPONENT_ICONS;

packages/core/content-type-builder/admin/src/components/ComponentCard/ComponentIcon/ComponentIcon.js

@@ -3,7 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Flex, Icon } from '@strapi/design-system';
-import * as Icons from '@strapi/icons';
+import { Cube } from '@strapi/icons';
+import COMPONENT_ICONS from '../../../utils/componentIcons';
 
 const Wrapper = styled(Flex)`
   border-radius: 50%;
@@ -23,14 +24,14 @@ export function ComponentIcon({ isActive, icon }) {
       background={isActive ? 'primary200' : 'neutral200'}
       justifyContent="center"
     >
-      <Icon as={Icons[icon] || Icons.Cube} />
+      <Icon as={COMPONENT_ICONS[icon] || Cube} />
     </Wrapper>
   );
 }
 
 ComponentIcon.defaultProps = {
   isActive: false,
-  icon: 'Cube',
+  icon: null,
 };
 
 ComponentIcon.propTypes = {

packages/core/content-type-builder/admin/src/components/IconPicker/index.js

@@ -12,45 +12,12 @@ import {
   FieldLabel,
   FieldInput,
 } from '@strapi/design-system';
-import * as Icons from '@strapi/icons';
+import { Trash, Search } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../utils';
-
+import COMPONENT_ICONS from '../../utils/componentIcons';
-const EXCLUDE_ICONS = [
-  'Boolean',
-  'CodeSquare',
-  'CollectionType',
-  'Component',
-  'CrossCircle',
-  'Component',
-  'Date',
-  'Dot',
-  'DynamicZone',
-  'Email',
-  'Enumeration',
-  'FeatherSquare',
-  'GlassesSquare',
-  'InformationSquare',
-  'Json',
-  'List',
-  'Media',
-  'MenuBurger',
-  'Minus',
-  'MinusOutlined',
-  'Number',
-  'Password',
-  'PlaySquare',
-  'PlusCircle',
-  'Relation',
-  'RichText',
-  'SingleType',
-  'Strapi',
-  'Text',
-  'Uid',
-  'default',
-];
 
 const IconPickerWrapper = styled(Flex)`
   label {
@@ -76,8 +43,8 @@ const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }) => {
           />
           <span>{ariaLabel}</span>
         </VisuallyHidden>
-        <Box padding={2} cursor="pointer" hasRadius background={isSelected ? 'primary200' : null}>
+        <Box padding={2} cursor="pointer" hasRadius background={isSelected && 'primary200'}>
-          <Icon as={Icons[iconKey]} color={isSelected ? 'primary600' : 'neutral300'} />
+          <Icon as={COMPONENT_ICONS[iconKey]} color={isSelected ? 'primary600' : 'neutral300'} />
         </Box>
       </FieldLabel>
     </Field>
@@ -96,7 +63,7 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
   const { formatMessage } = useIntl();
   const [showSearch, setShowSearch] = useState(false);
   const [search, setSearch] = useState('');
-  const allIcons = Object.keys(Icons).filter((icon) => !EXCLUDE_ICONS.includes(icon));
+  const allIcons = Object.keys(COMPONENT_ICONS);
   const [icons, setIcons] = useState(allIcons);
   const searchIconRef = useRef(null);
 
@@ -160,7 +127,7 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
                 id: getTrad('IconPicker.search.button.label'),
                 defaultMessage: 'Search icon button',
               })}
-              icon={<Icons.Search />}
+              icon={<Search />}
               noBorder
             />
           )}
@@ -171,7 +138,7 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
                 id: getTrad('IconPicker.remove.label'),
                 defaultMessage: 'Remove the selected icon',
               })}
-              icon={<Icons.Trash />}
+              icon={<Trash />}
               noBorder
             />
           )}

packages/core/content-type-builder/admin/src/components/IconPicker/tests/index.test.js

@@ -62,7 +62,7 @@ describe('IconPicker', () => {
     await userEvent.click(screen.getByText('Search icon button'));
     await userEvent.type(screen.getByPlaceholderText('Search for an icon'), 'calendar');
 
-    expect(screen.getByText('Select Calendar icon')).toBeInTheDocument();
+    expect(screen.getByText('Select calendar icon')).toBeInTheDocument();
     expect(screen.queryByText('Select Trash icon')).not.toBeInTheDocument();
   });
 
@@ -97,14 +97,14 @@ describe('IconPicker', () => {
     const App = makeApp({ onChange: onChangeMock });
     render(App);
 
-    fireEvent.click(screen.getByLabelText('Select Calendar icon'));
+    fireEvent.click(screen.getByLabelText('Select calendar icon'));
 
     expect(onChangeMock);
     expect(onChangeMock).toHaveBeenCalledWith(
       expect.objectContaining({
         target: expect.objectContaining({
           name: 'componentToCreate.icon',
-          value: 'Calendar',
+          value: 'calendar',
         }),
       })
     );

packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap

@@ -3627,9 +3627,21 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <div
                             class="c43 c34 c59"
                           >
-                            <div
+                            <svg
                               class="c60 c61"
+                              fill="none"
+                              height="1rem"
+                              viewBox="0 0 24 24"
+                              width="1rem"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M3.869 2.99V0h2.9v2.99h10.463V0h2.9v2.99h.629c2.768 0 3.203.498 3.239 2.926V21c0 2.124-.191 3-2.802 3H2.818C.208 24 0 23.363 0 20.785V6.21c.035-2.049.233-3.22 3.001-3.22h.868ZM2.32 20.369c0 .811.245.865.776.865h17.905c.53 0 .68-.012.68-.825V8.233c-.015-.627-.219-.737-.631-.737H2.907c-.413 0-.592.09-.587.573v12.3Z"
+                                fill="#212134"
+                                fill-rule="evenodd"
                               />
+                            </svg>
                           </div>
                           <div
                             class="c62"

packages/core/content-type-builder/admin/src/utils/componentIcons.js

@@ -0,0 +1,143 @@
+import * as Icons from '@strapi/icons';
+
+const COMPONENT_ICONS = {
+    alien: Icons.Alien,
+    apps: Icons.Apps,
+    archive: Icons.Archive,
+    arrowDown: Icons.ArrowDown,
+    arrowLeft: Icons.ArrowLeft,
+    arrowRight: Icons.ArrowRight,
+    arrowUp: Icons.ArrowUp,
+    attachment: Icons.Attachment,
+    bell: Icons.Bell,
+    bold: Icons.Bold,
+    book: Icons.Book,
+    briefcase: Icons.Briefcase,
+    brush: Icons.Brush,
+    bulletList: Icons.BulletList,
+    calendar: Icons.Calendar,
+    car: Icons.Car,
+    cast: Icons.Cast,
+    chartBubble: Icons.ChartBubble,
+    chartCircle: Icons.ChartCircle,
+    chartPie: Icons.ChartPie,
+    check: Icons.Check,
+    clock: Icons.Clock,
+    cloud: Icons.Cloud,
+    code: Icons.Code,
+    cog: Icons.Cog,
+    collapse: Icons.Collapse,
+    command: Icons.Command,
+    connector: Icons.Connector,
+    crop: Icons.Crop,
+    cross: Icons.Cross,
+    crown: Icons.Crown,
+    cup: Icons.Cup,
+    cursor: Icons.Cursor,
+    dashboard: Icons.Dashboard,
+    database: Icons.Database,
+    discord: Icons.Discord,
+    discuss: Icons.Discuss,
+    doctor: Icons.Doctor,
+    download: Icons.Download,
+    drag: Icons.Drag,
+    duplicate: Icons.Duplicate,
+    earth: Icons.Earth,
+    emotionHappy: Icons.EmotionHappy,
+    emotionUnhappy: Icons.EmotionUnhappy,
+    envelop: Icons.Envelop,
+    exit: Icons.Exit,
+    expand: Icons.Expand,
+    eye: Icons.Eye,
+    facebook: Icons.Facebook,
+    feather: Icons.Feather,
+    file: Icons.File,
+    fileError: Icons.FileError,
+    filePdf: Icons.FilePdf,
+    filter: Icons.Filter,
+    folder: Icons.Folder,
+    gate: Icons.Gate,
+    gift: Icons.Gift,
+    github: Icons.Github,
+    globe: Icons.Globe,
+    graphQl: Icons.GraphQl,
+    grid: Icons.Grid,
+    handHeart: Icons.HandHeart,
+    hashtag: Icons.Hashtag,
+    headphone: Icons.Headphone,
+    heart: Icons.Heart,
+    house: Icons.House,
+    information: Icons.Information,
+    italic: Icons.Italic,
+    key: Icons.Key,
+    landscape: Icons.Landscape,
+    layer: Icons.Layer,
+    layout: Icons.Layout,
+    lightbulb: Icons.Lightbulb,
+    link: Icons.Link,
+    lock: Icons.Lock,
+    magic: Icons.Magic,
+    manyToMany: Icons.ManyToMany,
+    manyToOne: Icons.ManyToOne,
+    manyWays: Icons.ManyWays,
+    medium: Icons.Medium,
+    message: Icons.Message,
+    microphone: Icons.Microphone,
+    monitor: Icons.Monitor,
+    moon: Icons.Moon,
+    music: Icons.Music,
+    oneToMany: Icons.OneToMany,
+    oneToOne: Icons.OneToOne,
+    oneWay: Icons.OneWay,
+    paint: Icons.Paint,
+    paintBrush: Icons.PaintBrush,
+    paperPlane: Icons.PaperPlane,
+    pencil: Icons.Pencil,
+    phone: Icons.Phone,
+    picture: Icons.Picture,
+    pin: Icons.Pin,
+    pinMap: Icons.PinMap,
+    plane: Icons.Plane,
+    play: Icons.Play,
+    plus: Icons.Plus,
+    priceTag: Icons.PriceTag,
+    puzzle: Icons.Puzzle,
+    question: Icons.Question,
+    quote: Icons.Quote,
+    reddit: Icons.Reddit,
+    refresh: Icons.Refresh,
+    repeat: Icons.Repeat,
+    restaurant: Icons.Restaurant,
+    rocket: Icons.Rocket,
+    rotate: Icons.Rotate,
+    scissors: Icons.Scissors,
+    search: Icons.Search,
+    seed: Icons.Seed,
+    server: Icons.Server,
+    shield: Icons.Shield,
+    shirt: Icons.Shirt,
+    shoppingCart: Icons.ShoppingCart,
+    slideshow: Icons.Slideshow,
+    stack: Icons.Stack,
+    star: Icons.Star,
+    store: Icons.Store,
+    strikeThrough: Icons.StrikeThrough,
+    sun: Icons.Sun,
+    television: Icons.Television,
+    thumbDown: Icons.ThumbDown,
+    thumbUp: Icons.ThumbUp,
+    train: Icons.Train,
+    trash: Icons.Trash,
+    twitter: Icons.Twitter,
+    typhoon: Icons.Typhoon,
+    underline: Icons.Underline,
+    upload: Icons.Upload,
+    user: Icons.User,
+    volumeMute: Icons.VolumeMute,
+    volumeUp: Icons.VolumeUp,
+    walk: Icons.Walk,
+    wheelchair: Icons.Wheelchair,
+    write: Icons.Write,
+};
+
+export default COMPONENT_ICONS;