Add Icons for Flex Component Inspector Controls (#5936)

Adding the icons to be used in #5851
concrete-utopia · Jun 14, 2024 · 4e79a74 · 4e79a74
1 parent 44ab0f9
commit 4e79a74
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 0 deletions.
diff --git a/editor/src/uuiui/icons.tsx b/editor/src/uuiui/icons.tsx
@@ -463,6 +463,188 @@ export const Icons = {
     width: 16,
     height: 16,
   }),
+  FlexDirectionRow: makeIcon({
+    category: 'inspector-element',
+    type: 'arrowRight',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  FlexDirectionRowReverse: makeIcon({
+    category: 'inspector-element',
+    type: 'arrowLeft',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  FlexDirectionColumn: makeIcon({
+    category: 'inspector-element',
+    type: 'arrowDown',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  FlexDirectionColumnReverse: makeIcon({
+    category: 'inspector-element',
+    type: 'arrowUp',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsRowCenter: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-row-center',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsRowFlexStart: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-row-flexStart',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsRowFlexEnd: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-row-flexEnd',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsRowStretch: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-row-stretch',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsRowBaseline: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-row-baseline',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsColumnCenter: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-column-center',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsColumnFlexStart: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-column-flexStart',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsColumnFlexEnd: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-column-flexEnd',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsColumnStretch: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-column-stretch',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  AlignItemsColumnBaseline: makeIcon({
+    category: 'inspector-element',
+    type: 'alignItems-column-baseline',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowCenter: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-center',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowFlexStart: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-flexstart',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowFlexEnd: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-flexend',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowSpaceBetween: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-spaceBetween',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowSpaceAround: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-spaceAround',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentRowSpaceEvenly: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-row-spaceEvenly',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnCenter: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-center',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnFlexStart: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-flexstart',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnFlexEnd: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-flexend',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnSpaceBetween: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-spaceBetween',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnSpaceAround: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-spaceAround',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  JustifyContentColumnSpaceEvenly: makeIcon({
+    category: 'inspector-element',
+    type: 'justifyContent-column-spaceEvenly',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
 } as const
 
 export const FunctionIcons = {

diff --git a/utopia-api/src/primitives/icons.tsx b/utopia-api/src/primitives/icons.tsx
@@ -78,6 +78,32 @@ export const UtopiaIcons = [
   'TextAlignLeft',
   'TextAlignCenter',
   'TextAlignRight',
+  'FlexDirectionRow',
+  'FlexDirectionRowReverse',
+  'FlexDirectionColumn',
+  'FlexDirectionColumnReverse',
+  'AlignItemsRowCenter',
+  'AlignItemsRowFlexStart',
+  'AlignItemsRowFlexEnd',
+  'AlignItemsRowStretch',
+  'AlignItemsRowBaseline',
+  'AlignItemsColumnCenter',
+  'AlignItemsColumnFlexStart',
+  'AlignItemsColumnFlexEnd',
+  'AlignItemsColumnStretch',
+  'AlignItemsColumnBaseline',
+  'JustifyContentRowCenter',
+  'JustifyContentRowFlexStart',
+  'JustifyContentRowFlexEnd',
+  'JustifyContentRowSpaceBetween',
+  'JustifyContentRowSpaceAround',
+  'JustifyContentRowSpaceEvenly',
+  'JustifyContentColumnCenter',
+  'JustifyContentColumnFlexStart',
+  'JustifyContentColumnFlexEnd',
+  'JustifyContentColumnSpaceBetween',
+  'JustifyContentColumnSpaceAround',
+  'JustifyContentColumnSpaceEvenly',
 ] as const
 
 export type UtopiaIcon = (typeof UtopiaIcons)[number]