Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(icons): migrate icons to composition API #1551

Merged
merged 1 commit into from
Jul 10, 2024
Merged

feat(icons): migrate icons to composition API #1551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 158 additions & 0 deletions packages/_vue3-migration-test/src/components/icons/test-icons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<template>
<ArrowDownIcon class="test-icons" />
<ArrowLeftIcon class="test-icons" />
<ArrowRightIcon class="test-icons" />
<ArrowUpIcon class="test-icons" />
<BagIcon class="test-icons" />
<BarCodeIcon class="test-icons" />
<BarcodeTinyIcon class="test-icons" />
<CartFilledIcon class="test-icons" />
<CartIcon class="test-icons" />
<CheckIcon class="test-icons" />
<CheckTinyIcon class="test-icons" />
<CheckboxSelectedFilledIcon class="test-icons" />
<CheckboxSelectedIcon class="test-icons" />
<CheckboxUnselectedFilledIcon class="test-icons" />
<CheckboxUnselectedIcon class="test-icons" />
<ChevronDownIcon class="test-icons" />
<ChevronLeftIcon class="test-icons" />
<ChevronRightIcon class="test-icons" />
<ChevronTinyDownIcon class="test-icons" />
<ChevronTinyLeftIcon class="test-icons" />
<ChevronTinyRightIcon class="test-icons" />
<ChevronTinyUpIcon class="test-icons" />
<ChevronUpIcon class="test-icons" />
<CornerArrowLeft class="test-icons" />
<CornerArrowRight class="test-icons" />
<CrossIcon class="test-icons" />
<CrossTinyIcon class="test-icons" />
<CuratedCheckFilledIcon class="test-icons" />
<CuratedCheckIcon class="test-icons" />
<CuratedCheckTinyFilledIcon class="test-icons" />
<CuratedCheckTinyIcon class="test-icons" />
<DiagonalArrowLeftDownIcon class="test-icons" />
<DiagonalArrowLeftTopIcon class="test-icons" />
<DiagonalArrowRightDownIcon class="test-icons" />
<DiagonalArrowRightTopIcon class="test-icons" />
<FiltersIcon class="test-icons" />
<Grid1ColIcon class="test-icons" />
<Grid2ColIcon class="test-icons" />
<Grid2RowsIcon class="test-icons" />
<Grid4ColIcon class="test-icons" />
<HeartIcon class="test-icons" />
<HeartIconFilled class="test-icons" />
<HideIcon class="test-icons" />
<HistoryIcon class="test-icons" />
<HistoryTinyIcon class="test-icons" />
<LightBulbOff class="test-icons" />
<LightBulbOn class="test-icons" />
<MenuIcon class="test-icons" />
<MinusIcon class="test-icons" />
<MinusTinyIcon class="test-icons" />
<PlusIcon class="test-icons" />
<PlusTinyIcon class="test-icons" />
<RadioButtonSelectedIcon class="test-icons" />
<RadioButtonUnselectedIcon class="test-icons" />
<SearchIcon class="test-icons" />
<SearchTinyIcon class="test-icons" />
<SettingsIcon class="test-icons" />
<ShowIcon class="test-icons" />
<SortAZIcon class="test-icons" />
<SortPriceDownIcon class="test-icons" />
<SortPriceUpIcon class="test-icons" />
<SortRelevancyIcon class="test-icons" />
<SortZAIcon class="test-icons" />
<StarFilledIcon class="test-icons" />
<StarIcon class="test-icons" />
<TagFilledIcon class="test-icons" />
<TagIcon class="test-icons" />
<TrashIcon class="test-icons" />
<TrashOpenIcon class="test-icons" />
<TrendingIcon class="test-icons" />
<TrendingTinyIcon class="test-icons" />
<UserFilledIcon class="test-icons" />
<UserIcon class="test-icons" />
</template>
<script setup lang="ts">
import {
ArrowDownIcon,
ArrowLeftIcon,
ArrowRightIcon,
ArrowUpIcon,
BagIcon,
BarCodeIcon,
BarcodeTinyIcon,
CartFilledIcon,
CartIcon,
CheckIcon,
CheckTinyIcon,
CheckboxSelectedFilledIcon,
CheckboxSelectedIcon,
CheckboxUnselectedFilledIcon,
CheckboxUnselectedIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronTinyDownIcon,
ChevronTinyLeftIcon,
ChevronTinyRightIcon,
ChevronTinyUpIcon,
ChevronUpIcon,
CornerArrowLeft,
CornerArrowRight,
CrossIcon,
CrossTinyIcon,
CuratedCheckFilledIcon,
CuratedCheckIcon,
CuratedCheckTinyFilledIcon,
CuratedCheckTinyIcon,
DiagonalArrowLeftDownIcon,
DiagonalArrowLeftTopIcon,
DiagonalArrowRightDownIcon,
DiagonalArrowRightTopIcon,
FiltersIcon,
Grid1ColIcon,
Grid2ColIcon,
Grid2RowsIcon,
Grid4ColIcon,
HeartIcon,
HeartIconFilled,
HideIcon,
HistoryIcon,
HistoryTinyIcon,
LightBulbOff,
LightBulbOn,
MenuIcon,
MinusIcon,
MinusTinyIcon,
PlusIcon,
PlusTinyIcon,
RadioButtonSelectedIcon,
RadioButtonUnselectedIcon,
SearchIcon,
SearchTinyIcon,
SettingsIcon,
ShowIcon,
SortAZIcon,
SortPriceDownIcon,
SortPriceUpIcon,
SortRelevancyIcon,
SortZAIcon,
StarFilledIcon,
StarIcon,
TagFilledIcon,
TagIcon,
TrashIcon,
TrashOpenIcon,
TrendingIcon,
TrendingTinyIcon,
UserFilledIcon,
UserIcon
} from '../../../../x-components/src/components/icons';
</script>
<style scoped lang="scss">
.test-icons {
height: 40px;
width: 40px;
}
</style>
1 change: 1 addition & 0 deletions packages/_vue3-migration-test/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ export { default as TestExtraParams } from './extra-params/test-extra-params.vue
export { default as TestSearch } from './test-search.vue';
export { default as TestTagging } from './tagging/test-tagging.vue';
export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
export { default as TestIcons } from './icons/test-icons.vue';
8 changes: 7 additions & 1 deletion packages/_vue3-migration-test/src/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ import {
TestSearch,
TestExperienceControls,
TestTagging,
TestRenderlessExtraParam
TestRenderlessExtraParam,
TestIcons
} from './';

const routes = [
Expand Down Expand Up @@ -290,6 +291,11 @@ const routes = [
path: '/renderless-extra-param',
name: 'RenderlessExtraParam',
component: TestRenderlessExtraParam
},
{
path: '/icons',
name: 'Icons',
component: TestIcons
}
];

Expand Down
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/arrow-down.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 1.5L4 6.24683"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/arrow-left.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5 4H1.75317"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/arrow-right.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.5 4H6.24683"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/arrow-up.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 6.5L4 1.75317"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/bag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.8 2.29995H6.29995M2.33333 1.19995L1.5 2.29995V6.42561C2.61092 6.42561 4.85446 6.42561 6.5 6.42561V2.29995L5.66667 1.19995H2.33333Z"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/bar-code.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.75 2V6M3.8501 2V6M4.25 2V6M5.25 2V6M1 1H7V7H1V1Z"
stroke="currentColor"
Expand All @@ -13,7 +8,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/barcode-tiny.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.16667 2.67202V5.33869M3.83334 2.67202V5.33869M4.16667 2.67202V5.33869M4.83334 2.67202V5.33869M2 2.00537H6V6.00537H2V2.00537Z"
stroke="currentColor"
Expand All @@ -13,7 +8,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/cart-filled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
fill="currentColor"
Expand All @@ -23,7 +18,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/cart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
stroke="currentColor"
Expand All @@ -21,7 +16,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
13 changes: 2 additions & 11 deletions packages/x-components/src/components/icons/check-tiny.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template functional>
<svg
:class="['x-icon'].concat(data.staticClass, data.class)"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<template>
<svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 2.50537C5.08333 3.50537 4.16667 4.50537 3.25 5.50537L2 4.14173"
stroke="currentColor"
Expand All @@ -14,7 +9,3 @@
/>
</svg>
</template>

<script lang="ts">
export default {};
</script>
Loading
Loading