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

Jump to bottom

feat: new icon 2.0 version #2677

Merged
merged 2 commits into from
Aug 10, 2023
Merged

feat: new icon 2.0 version #2677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
518be31
feat: new icon 2.0 version
uyarn Aug 10, 2023
79c814a
chore: update docs
uyarn Aug 10, 2023
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
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
"mitt": "^3.0.0",
"raf": "^3.4.1",
"sortablejs": "^1.15.0",
"tdesign-icons-vue": "^0.1.6",
"tdesign-icons-vue": "^0.2.0",
"tinycolor2": "^1.4.2",
"validator": "^13.5.1"
},
Expand Down Expand Up @@ -176,7 +176,7 @@
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-terser": "~7.0.2",
"rollup-plugin-vue": "^5.1.9",
"tdesign-icons-view": "^0.1.5",
"tdesign-icons-view": "^0.2.0",
"tdesign-publish-cli": "^0.0.12",
"tdesign-site-components": "^0.13.0",
"tdesign-theme-generator": "^1.0.0",
Expand Down
5 changes: 2 additions & 3 deletions src/anchor/__tests__/__snapshots__/anchor-target.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// Vitest Snapshot v1

exports[`AnchorTarget > <slot> > should render default slot 1`] = `
"<h1 id=\\"test-target\\" class=\\"t-anchor__target\\">this is default slots<svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\">
<path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path>
<path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path>
"<h1 id=\\"test-target\\" class=\\"t-anchor__target\\">this is default slots<svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\">
<path fill=\\"currentColor\\" d=\\"M6 1h9.41L21 6.59V19H6V1zm2 2v14h11V9h-6V3H8zm7 .41V7h3.59L15 3.41zM4 5v16h11v2H2V5h2z\\"></path>
</svg></h1>"
`;
10 changes: 4 additions & 6 deletions src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,12 @@ exports[`BackTop Component > props.shape is equal to circle 1`] = `
class="t-icon t-icon-backtop t-back-top__icon"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
Expand All @@ -68,13 +67,12 @@ exports[`BackTop Component > props.shape is equal to square 1`] = `
class="t-icon t-icon-backtop t-back-top__icon"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
Expand Down
10 changes: 4 additions & 6 deletions src/breadcrumb/__tests__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,12 @@ exports[`Breadcrumb > <slot> > <separator> 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down Expand Up @@ -64,13 +63,12 @@ exports[`Breadcrumb > <slot> > <separator> 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down
6 changes: 3 additions & 3 deletions src/breadcrumb/_example/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<t-breadcrumb>
<t-breadcrumbItem><icon name="books" slot="icon" />页面1</t-breadcrumbItem>
<t-breadcrumbItem><icon name="books" slot="icon" />页面2</t-breadcrumbItem>
<t-breadcrumbItem><icon name="books" slot="icon" />页面3</t-breadcrumbItem>
<t-breadcrumbItem><icon name="bookmark" slot="icon" />页面1</t-breadcrumbItem>
<t-breadcrumbItem><icon name="bookmark" slot="icon" />页面2</t-breadcrumbItem>
<t-breadcrumbItem><icon name="bookmark" slot="icon" />页面3</t-breadcrumbItem>
</t-breadcrumb>
</template>
<script>
Expand Down
15 changes: 6 additions & 9 deletions src/date-picker/__tests__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,12 @@ exports[`DatePicker > :mode 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down Expand Up @@ -79,13 +78,12 @@ exports[`DatePicker > :range 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down Expand Up @@ -126,13 +124,12 @@ exports[`DatePicker > :value 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down
15 changes: 6 additions & 9 deletions src/date-picker/__tests__/__snapshots__/rangepicker.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,12 @@ exports[`DateRangePicker > :mode 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down Expand Up @@ -79,13 +78,12 @@ exports[`DateRangePicker > :range 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down Expand Up @@ -126,13 +124,12 @@ exports[`DateRangePicker > :value 1`] = `
class="t-icon t-icon-calendar"
fill="none"
height="1em"
viewBox="0 0 16 16"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
Expand Down
36 changes: 21 additions & 15 deletions src/icon/_example/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
<template>
<t-space direction="vertical">
<t-space break-line>
<icon name="loading" style="color: #999999" />
<icon name="close" @click="onIconClose" />
<icon name="check-circle-filled" />
<p>How do you feel today?</p>
<icon name="sneer" @click="onIconClose" />
<icon name="unhappy" />
<icon name="excited" />
<icon name="surprised" />
<icon name="giggle" />
</t-space>
<t-space break-line align="center">
<icon name="check-circle-filled" size="small" />
<icon name="check-circle-filled" />
<icon name="check-circle-filled" size="medium" />
<icon name="check-circle-filled" size="large" />
<icon name="check-circle-filled" size="25px" />
<icon name="check-circle-filled" size="2em" />
<p>What's your favourite food?</p>
<icon name="tangerinr" color="orange" />
<icon name="bamboo-shoot" color="green" />
<icon name="apple" color="red" />
<icon name="milk" color="#0052D9" />
<icon name="peach" color="pink" />
</t-space>
<t-space break-line>
<icon name="check-circle-filled" style="color: red" />
<icon name="check-circle-filled" style="color: green" />
<icon name="check-circle-filled" style="color: orange" />
<p>How much icons does TDesign Icon includes?</p>
<icon name="numbers-1" style="color: var(--td-brand-color-5)" />
<icon name="numbers-2" style="color: var(--td-brand-color-6)" />
<icon name="numbers-0" style="color: var(--td-brand-color-7)" />
<icon name="numbers-3" style="color: var(--td-brand-color-8)" />
</t-space>
</t-space>
</template>

<script>
import { Icon } from 'tdesign-icons-vue';

export default {
components: { Icon },
methods: {
components: {
Icon,
},
method: {
onIconClose() {
console.log('icon was clicked.');
},
Expand Down
41 changes: 21 additions & 20 deletions src/icon/_example/iconfont.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
<template>
<t-space direction="vertical">
<t-space break-line>
<icon-font name="loading" />
<icon-font name="close" @click="onIconClose" />
<icon-font name="check-circle-filled" />
<p>How do you feel today?</p>
<icon-font name="sneer" />
<icon-font name="unhappy" />
<icon-font name="excited" />
<icon-font name="surprised" />
<icon-font name="giggle" />
</t-space>
<t-space break-line align="center">
<icon-font name="check-circle-filled" size="small" />
<icon-font name="check-circle-filled" />
<icon-font name="check-circle-filled" size="medium" />
<icon-font name="check-circle-filled" size="large" />
<icon-font name="check-circle-filled" size="25px" />
<icon-font name="check-circle-filled" size="2em" />
<t-space break-line>
<p>What's your favourite food?</p>
<icon-font name="tangerinr" style="color: orange" />
<icon-font name="bamboo-shoot" style="color: green" />
<icon-font name="apple" style="color: red" />
<icon-font name="milk" style="color: #0052d9" />
<icon-font name="peach" style="color: pink" />
</t-space>
<t-space break-line align="center">
<icon-font name="check-circle-filled" style="color: red" />
<icon-font name="check-circle-filled" style="color: green" />
<icon-font name="check-circle-filled" style="color: orange" />
<t-space break-line>
<p>How much icons does TDesign Icon includes?</p>
<icon-font name="numbers-1" style="color: var(--td-brand-color-5)" />
<icon-font name="numbers-2" style="color: var(--td-brand-color-6)" />
<icon-font name="numbers-0" style="color: var(--td-brand-color-7)" />
<icon-font name="numbers-3" style="color: var(--td-brand-color-8)" />
</t-space>
</t-space>
</template>

<script>
import { IconFont } from 'tdesign-icons-vue';

export default {
components: { IconFont },
methods: {
onIconClose() {
console.log('icon was clicked.');
},
components: {
IconFont,
},
};
</script>
69 changes: 49 additions & 20 deletions src/icon/_example/single.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,62 @@
<template>
<t-space direction="vertical">
<t-space break-line align="center">
<loading-icon />
<close-icon @click="onIconClose" />
<check-circle-filled-icon />
<t-space break-line style="color: var(--td-brand-color)">
<letters-t-icon @click="onIconClick" />
<letters-d-icon />
<letters-e-icon />
<letters-s-icon />
<letters-i-icon />
<letters-g-icon />
<letters-n-icon />
</t-space>
<t-space break-line align="center">
<check-circle-filled-icon size="small" />
<check-circle-filled-icon />
<check-circle-filled-icon size="medium" />
<check-circle-filled-icon size="large" />
<check-circle-filled-icon size="25px" />
<check-circle-filled-icon size="2em" />
</t-space>
<t-space break-line align="center">
<check-circle-filled-icon style="color: red" />
<check-circle-filled-icon style="color: green" />
<check-circle-filled-icon style="color: orange" />
<t-space break-line>
<component-checkbox-icon />
<component-breadcrumb-icon />
<component-input-icon />
<component-switch-icon />
<component-dropdown-icon />
<component-radio-icon />
<component-steps-icon />
</t-space>
</t-space>
</template>

<script>
import { LoadingIcon, CloseIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue';
import {
LettersTIcon,
LettersDIcon,
LettersSIcon,
LettersEIcon,
LettersIIcon,
LettersNIcon,
LettersGIcon,
ComponentCheckboxIcon,
ComponentInputIcon,
ComponentSwitchIcon,
ComponentBreadcrumbIcon,
ComponentDropdownIcon,
ComponentRadioIcon,
ComponentStepsIcon,
} from 'tdesign-icons-vue';

export default {
components: { LoadingIcon, CloseIcon, CheckCircleFilledIcon },
components: {
LettersTIcon,
LettersDIcon,
LettersSIcon,
LettersEIcon,
LettersIIcon,
LettersNIcon,
LettersGIcon,
ComponentCheckboxIcon,
ComponentInputIcon,
ComponentSwitchIcon,
ComponentBreadcrumbIcon,
ComponentDropdownIcon,
ComponentRadioIcon,
ComponentStepsIcon,
},
methods: {
onIconClose() {
onIconClick() {
console.log('icon was clicked.');
},
},
Expand Down
Loading
Loading