feat(icons): update icons (#318)

* feat(icons): update icons Signed-off-by: Dahyun Yu <[email protected]> * fix(icons): edit `npm run icon` command Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `data-display` components Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `feedbacks` components Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `foundation` components Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `inputs` components Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `layouts` components Signed-off-by: Dahyun Yu <[email protected]> * style(icons): update icon names of `navigation` components Signed-off-by: Dahyun Yu <[email protected]> --------- Signed-off-by: Dahyun Yu <[email protected]> Co-authored-by: yuda <[email protected]>
cloudforet-io · Mar 3, 2023 · 3a10f7d · 3a10f7d
1 parent c3a0632
commit 3a10f7d
Show file tree

Hide file tree

Showing 397 changed files with 1,517 additions and 1,359 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "tsc-alias": "tsc-alias -p tsconfig.build.json",
     "build:storybook": "NODE_OPTIONS=--max_old_space_size=4096 build-storybook -o .out -s public",
     "storybook": "start-storybook -p 6006 -s public",
-    "icon": "vsvg -s ./src/assets/icons -t src/foundation/icons/p-icons --es6",
+    "icon": "vsvg -s ./src/foundation/icons/icon-assets -t src/foundation/icons/p-icons --es6",
     "css": "node scripts/css.js",
     "eslint": "eslint --quiet --ext .js,.vue,.ts ./src/",
     "stylelint": "stylelint \"src/**/*.{css,vue,pcss,scss}\"",

diff --git a/src/data-display/board-item/PBoardItem.stories.mdx b/src/data-display/board-item/PBoardItem.stories.mdx
@@ -58,7 +58,7 @@ Main content used for `board-item` component is injected using `content` slot.<b
             template: `
                 <div class="h-full w-full overflow p-8">
                     <p-board-item
-                        left-icon="ic_more"
+                        left-icon="ic_ellipsis-horizontal"
                         :icon-button-sets="standardIconActionSet"
                     >
                         <template #content>
@@ -95,7 +95,7 @@ and when you want a custom ui, use the `left-content` slot to replace it.<br/>
             template: `
                 <div class="h-full w-full overflow p-8">
                     <p-board-item
-                        left-icon="ic_collector_tags"
+                        left-icon="ic_resource_hexagon"
                     >
                         <template #content>
                             <strong>Left Icon</strong>

diff --git a/src/data-display/board-item/mock.ts b/src/data-display/board-item/mock.ts
@@ -14,7 +14,7 @@ export const standardIconActionSet: IconSet[] = [
         eventAction: () => {},
     },
     {
-        iconName: 'ic_trashcan',
+        iconName: 'ic_delete',
         tooltipText: 'Delete',
         eventAction: () => {},
     },
@@ -30,7 +30,7 @@ export const extraIconActionSet: IconSet[] = [
         eventAction: () => {},
     },
     {
-        iconName: 'ic_trashcan',
+        iconName: 'ic_delete',
         eventAction: () => {},
     },
     {

diff --git a/src/data-display/board/mock.ts b/src/data-display/board/mock.ts
@@ -42,23 +42,23 @@ export const basicItemSets: BoardSet[] = [
 
 export const boardStandardItemSets: BoardSet[] = [
     {
-        leftIcon: 'admin',
+        leftIcon: 'img_avatar_admin',
         iconButtonSets: standardIconActionSet,
     },
     {
-        leftIcon: 'aws-network',
+        leftIcon: 'img_avatar_project-admin',
         iconButtonSets: standardIconActionSet,
     },
     {
-        leftIcon: 'aws-ec2',
+        leftIcon: 'img_resource_default',
         iconButtonSets: standardIconActionSet,
     },
     {
-        leftIcon: 'ic_collector_tags',
+        leftIcon: 'ic_resource_hexagon',
         iconButtonSets: standardIconActionSet,
     },
     {
-        leftIcon: 'ic_server',
+        leftIcon: 'img_resource_server',
         iconButtonSets: standardIconActionSet,
     },
 ];

diff --git a/src/data-display/cards/card/PCard.stories.mdx b/src/data-display/cards/card/PCard.stories.mdx
@@ -170,7 +170,7 @@ If you give ```false``` to ```header``` props and don't give ```header``` slot,
             <template #header>
                 <div class="flex justify-between items-center">
                     <span class="text-gray-900">Created</span>
-                    <span class="text-alert">1 <p-i name="ic_decrease" height="12px" width="12px"/></span>
+                    <span class="text-alert">1 <p-i name="ic_caret-down-filled-alt" height="12px" width="12px" color="inherit" /></span>
                 </div>
             </template>
             <div class="flex justify-between items-center">

diff --git a/src/data-display/cards/list-card/PListCard.stories.mdx b/src/data-display/cards/list-card/PListCard.stories.mdx
@@ -158,7 +158,7 @@ If you give ```false``` to ```header``` props and don't give ```header``` slot,
                         </span>
                     </div>
                     <div v-if="item.description">
-                        <p-i name="ic_reply" width="1rem" height="1rem" class="ml-4" />
+                        <p-i name="ic_subdirectory-arrow-right" width="1rem" height="1rem" class="ml-4" />
                         <strong class="text-xs leading-5 text-gray-500 mr-1">{{item.description.message}}</strong>
                         <span class="text-xs leading-5 text-gray-400">{{item.date}}</span>
                     </div>
@@ -172,7 +172,7 @@ If you give ```false``` to ```header``` props and don't give ```header``` slot,
                 return {
                     items: range(10).map(() => ({
                         value: faker.lorem.sentence(6),
-                        icon: faker.helpers.arrayElement(['ic_alert', 'ic_list_duplication']),
+                        icon: faker.helpers.arrayElement(['ic_error-filled', 'ic_warning-filled']),
                         badge: faker.helpers.arrayElement(['Acknowledged', 'Triggered']),
                         date: dayjs(faker.date.past('2021')).format('MM/DD hh:mm'),
                         description: faker.helpers.arrayElement([{

diff --git a/src/data-display/collapsible/collapsible-toggle/PCollapsibleToggle.vue b/src/data-display/collapsible/collapsible-toggle/PCollapsibleToggle.vue
@@ -10,7 +10,7 @@
             </span>
             <p-i width="0.875rem"
                  height="0.875rem"
-                 :name="proxyIsCollapsed ? 'ic_arrow_bottom' : 'ic_arrow_top'"
+                 :name="proxyIsCollapsed ? 'ic_chevron-down' : 'ic_chevron-up'"
                  color="inherit"
             />
         </span>

diff --git a/src/data-display/dynamic/dynamic-field/PDynamicField.stories.mdx b/src/data-display/dynamic/dynamic-field/PDynamicField.stories.mdx
@@ -381,7 +381,7 @@ interface StateOptions extends CommonOptions {
                 <p-dynamic-field type="state" :options="{icon: {color: 'green.400'}}" data="RUNNING"></p-dynamic-field>
                 <br/><br/>
                 <p class="font-bold text-lg">with icon color</p><br/>
-                <p-dynamic-field type="state" :options="{icon: {image: 'ic_stopping'}}" data="RUNNING"></p-dynamic-field>
+                <p-dynamic-field type="state" :options="{icon: {image: 'ic_error-filled'}}" data="RUNNING"></p-dynamic-field>
                 <br/><br/>
                 <p class="font-bold my-4 text-lg">postfix ( state)</p>
                 <p-dynamic-field type="state" :options="{postfix: ' state', icon: {color: 'green.400'}}" data="RUNNING"></p-dynamic-field>

diff --git a/src/data-display/dynamic/dynamic-layout/mock.ts b/src/data-display/dynamic/dynamic-layout/mock.ts
@@ -74,31 +74,32 @@ export default {
                                 type: 'state',
                                 options: {
                                     icon: {
-                                        image: 'ic_state_active',
+                                        image: 'ic_check',
+                                        color: 'green.500',
                                     },
                                 },
                             },
                             DUPLICATED: {
                                 type: 'state',
                                 options: {
                                     icon: {
-                                        image: 'ic_state_duplicated',
+                                        image: 'ic_warning-filled',
                                     },
                                 },
                             },
                             DISCONNECTED: {
                                 type: 'state',
                                 options: {
                                     icon: {
-                                        image: 'ic_state_disconnected',
+                                        image: 'ic_plug-filled',
                                     },
                                 },
                             },
                             MANUAL: {
                                 type: 'state',
                                 options: {
                                     icon: {
-                                        image: 'ic_state_manual',
+                                        image: 'ic_spanner',
                                     },
                                 },
                             },
@@ -406,31 +407,32 @@ export default {
                         type: 'state',
                         options: {
                             icon: {
-                                image: 'ic_state_active',
+                                image: 'ic_check',
+                                color: 'green.500',
                             },
                         },
                     },
                     DUPLICATED: {
                         type: 'state',
                         options: {
                             icon: {
-                                image: 'ic_state_duplicated',
+                                image: 'ic_warning-filled',
                             },
                         },
                     },
                     DISCONNECTED: {
                         type: 'state',
                         options: {
                             icon: {
-                                image: 'ic_state_disconnected',
+                                image: 'ic_plug-filled',
                             },
                         },
                     },
                     MANUAL: {
                         type: 'state',
                         options: {
                             icon: {
-                                image: 'ic_state_manual',
+                                image: 'ic_spanner',
                             },
                         },
                     },

diff --git a/...amic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx b/...amic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx
@@ -162,15 +162,16 @@ export const Template = (args, { argTypes }) => ({
                             type: 'state',
                             options: {
                                 icon: {
-                                    image: 'ic_state_active',
+                                    image: 'ic_check',
+                                    color: 'green.500',
                                 },
                             },
                         },
                         DISCONNECTED: {
                             type: 'state',
                             options: {
                                 icon: {
-                                    image: 'ic_state_disconnected',
+                                    image: 'ic_plug-filled',
                                 },
                             },
                         },

diff --git a/src/data-display/heading/PHeading.vue b/src/data-display/heading/PHeading.vue
@@ -6,7 +6,7 @@
             <span v-if="showBackButton"
                   class="back-button"
             >
-                <p-icon-button name="ic_back"
+                <p-icon-button name="ic_arrow-left"
                                @click="$emit('click-back-button',$event)"
                 />
             </span>

diff --git a/src/data-display/label/PLabel.stories.mdx b/src/data-display/label/PLabel.stories.mdx
@@ -59,13 +59,13 @@ export const Template = (args, {argTypes}) => ({
                     <div class="flex items-center">
                         <p-label text="Label"/>
                         <p-label text="Label" clickable/>
-                        <p-label left-icon="ic_private" text="Label"/>
+                        <p-label left-icon="ic_lock-filled" text="Label"/>
                     </div>
                     <br/>
                     <div class="flex items-center">
                         <p-label text="Label" deletable/>
                         <p-label text="Label" deletable clickable/>
-                        <p-label left-icon="ic_public" text="Label" deletable/>
+                        <p-label left-icon="ic_globe-filled" text="Label" deletable/>
                     </div>
                 </div>
             `
@@ -160,9 +160,9 @@ export const Template = (args, {argTypes}) => ({
             components: { PLabel },
             template: `
                 <div class="h-full w-full overflow p-8">
-                    <p-label left-icon="ic_private" text="Label"/>
-                    <p-label left-icon="ic_public" text="Label"/>
-                    <p-label left-icon="ic_tooltip" text="Label"/>
+                    <p-label left-icon="ic_lock-filled" text="Label"/>
+                    <p-label left-icon="ic_globe-filled" text="Label"/>
+                    <p-label left-icon="ic_question-mark-circle-filled" text="Label"/>
                 </div>
             `
         }}

diff --git a/src/data-display/label/PLabel.vue b/src/data-display/label/PLabel.vue
@@ -19,7 +19,7 @@
         </span>
 
         <p-i v-if="deletable"
-             name="ic_delete"
+             name="ic_close"
              width="1rem"
              height="1rem"
              class="label-delete-icon"

diff --git a/src/data-display/popover/PPopover.vue b/src/data-display/popover/PPopover.vue
@@ -9,14 +9,22 @@
         >
             <slot />
         </span>
-        <div ref="contentRef" class="popper" :class="{ 'visible': proxyIsVisible }">
+        <div ref="contentRef"
+             class="popper"
+             :class="{ 'visible': proxyIsVisible }"
+        >
             <div class="popper-content-wrapper">
                 <slot name="content" />
-                <p-icon-button name="ic_delete" color="inherit" size="sm"
-                               class="delete-icon" @click="handleClickDeleteIcon"
+                <p-icon-button name="ic_close"
+                               color="inherit"
+                               size="sm"
+                               class="delete-icon"
+                               @click="handleClickDeleteIcon"
                 />
             </div>
-            <div class="arrow" data-popper-arrow />
+            <div class="arrow"
+                 data-popper-arrow
+            />
         </div>
     </component>
 </template>

diff --git a/src/data-display/status/PStatus.stories.mdx b/src/data-display/status/PStatus.stories.mdx
@@ -82,10 +82,10 @@ export const Template = (args, { argTypes }) => ({
             components:{ PStatus },
             template: `
                 <div style="display:flex; align-items:center; justify-content:center;">
-                    <p-status icon="ic_state_active" text="Enabled" style="margin: 1rem" />
-                    <p-status icon="ic_state_disconnected" text="Disconnected" style="margin: 1rem" />
-                    <p-status icon="ic_state_duplicated" text="Duplicated" style="margin: 1rem" />
-                    <p-status icon="ic_state_manual" text="Manual" style="margin: 1rem" icon-animation="spin" />
+                    <p-status icon="ic_check" text="Enabled" style="margin: 1rem" />
+                    <p-status icon="ic_plug-filled" text="Disconnected" style="margin: 1rem" />
+                    <p-status icon="ic_warning-filled" text="Duplicated" style="margin: 1rem" />
+                    <p-status icon="ic_spanner-filled" text="Manual" style="margin: 1rem" icon-animation="spin" />
                 </div>`,
         }}
     </Story>

diff --git a/src/data-display/tables/data-table/PDataTable.vue b/src/data-display/tables/data-table/PDataTable.vue
@@ -68,11 +68,11 @@
                                             <template v-if="isFieldSortable(field.sortable)">
                                                 <p-i
                                                     v-if="sortable && (field.sortKey|| field.name) === sortBy"
-                                                    :name="proxyState.proxySortDesc ? 'ic_table_sort_fromZ' : 'ic_table_sort_fromA'"
+                                                    :name="proxyState.proxySortDesc ? 'ic_caret-up-filled' : 'ic_caret-down-filled'"
                                                     class="sort-icon"
                                                 />
                                                 <p-i v-else
-                                                     name="ic_table_sort"
+                                                     name="ic_caret-down"
                                                      class="sort-icon"
                                                 />
                                             </template>

diff --git a/src/data-display/tags/PTag.vue b/src/data-display/tags/PTag.vue
@@ -4,20 +4,25 @@
           :class="{deletable: deletable, selected: selected, outline: outline, invalid: invalid}"
           v-on="$listeners"
     >
-        <p-i v-if="invalid" class="invalid-icon"
-             name="ic_alert"
+        <p-i v-if="invalid"
+             class="invalid-icon"
+             name="ic_error-filled"
              width="0.8rem"
              height="0.8rem"
         />
         <span class="tag-contents">
             <slot name="default">
-                <span v-if="categoryItem" class="category"><slot name="category">[{{ categoryItem.label || categoryItem.name }}]</slot></span>
-                <span v-if="keyItem" class="key"><slot name="key">{{ keyItem.label || keyItem.name }}:</slot></span>
+                <span v-if="categoryItem"
+                      class="category"
+                ><slot name="category">[{{ categoryItem.label || categoryItem.name }}]</slot></span>
+                <span v-if="keyItem"
+                      class="key"
+                ><slot name="key">{{ keyItem.label || keyItem.name }}:</slot></span>
                 <span v-if="valueItem"><slot name="value">{{ valueItem.label || valueItem.name }}</slot></span>
             </slot>
         </span>
         <p-i v-if="deletable"
-             name="ic_delete"
+             name="ic_close"
              width="1rem"
              height="1rem"
              class="delete-icon"

diff --git a/src/data-display/tree/PTree.stories.mdx b/src/data-display/tree/PTree.stories.mdx
@@ -63,19 +63,19 @@ export const ExpertTemplate = (args, { argTypes }) => ({
                     />
                 </template>
                 <template #toggle-right>
-                    <p-i name="ic_bookmark"
+                    <p-i name="ic_favorite-filled"
                          width="1rem" height="1rem"
                          color="inherit"
                     />
                 </template>
                 <template #icon="{node}">
                     <template v-if="editMode">
                         <p-i v-if="node.data.item_type === 'PROJECT_GROUP'"
-                             :name="permissionInfo[node.data.id] ? 'ic_tree_project-group' : 'ic_tree_project-group_locked'"
+                             :name="permissionInfo[node.data.id] ? 'ic_folder-filled' : 'ic_lock-filled'"
                              width="1rem" height="1rem" color="inherit"
                         />
                     </template>
-                    <p-i v-else :name="node.data.item_type === 'PROJECT' ? 'ic_tree_project' : 'ic_tree_project-group'"
+                    <p-i v-else :name="node.data.item_type === 'PROJECT' ? 'ic_document-filled' : 'ic_folder-filled'"
                          width="1rem" height="1rem" color="inherit"
                     />
                 </template>

diff --git a/src/data-display/tree/PTree.vue b/src/data-display/tree/PTree.vue
@@ -42,7 +42,7 @@
                                        size="sm"
                             />
                             <p-i v-else-if="!toggleOptions.validator || (toggleOptions.validator && toggleOptions.validator(node))"
-                                 :name="node.$folded ? 'ic_tree_arrow' : 'ic_tree_arrow--opened'"
+                                 :name="node.$folded ? 'ic_caret-right' : 'ic_caret-down-filled-alt'"
                                  width="1em"
                                  height="1em"
                                  color="inherit"