Skip to content

Commit 0cccf62

Browse files
ruibabyruibaby
committed
Replace SVG icons with unocss classes
1 parent 51aad5b commit 0cccf62

6 files changed

Lines changed: 27 additions & 200 deletions

File tree

‎packages/comment-widget/src/base-form.ts‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -268,17 +268,7 @@ export class BaseForm extends LitElement {
268268
${
269269
this.submitting
270270
? html` <icon-loading></icon-loading>`
271-
: html` <svg
272-
viewBox="0 0 24 24"
273-
width="1.25em"
274-
height="1.25em"
275-
class="h-full w-full"
276-
>
277-
<path
278-
fill="currentColor"
279-
d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
280-
></path>
281-
</svg>`
271+
: html`<i class="i-mingcute-send-line size-5"></i>`
282272
}
283273
${msg('Submit')}
284274
</button>
@@ -342,6 +332,7 @@ export class BaseForm extends LitElement {
342332
varStyles,
343333
baseStyles,
344334
css`
335+
345336
.form {
346337
width: 100%;
347338
display: flex;
@@ -502,6 +493,7 @@ export class BaseForm extends LitElement {
502493
cursor: not-allowed;
503494
opacity: 0.5;
504495
}
496+
@unocss-placeholder;
505497
`,
506498
];
507499
}

‎packages/comment-widget/src/comment-item.ts‎

Lines changed: 6 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -130,42 +130,8 @@ export class CommentItem extends LitElement {
130130
>
131131
${
132132
this.upvoted
133-
? html`<svg
134-
slot="icon"
135-
xmlns="http://www.w3.org/2000/svg"
136-
width="32"
137-
height="32"
138-
viewBox="0 0 24 24"
139-
>
140-
<g
141-
fill="none"
142-
stroke-linecap="round"
143-
stroke-linejoin="round"
144-
stroke-width="2"
145-
>
146-
<path d="M0 0h24v24H0z" />
147-
<path
148-
fill="red"
149-
d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074z"
150-
/>
151-
</g>
152-
</svg>`
153-
: html`<svg
154-
slot="icon"
155-
xmlns="http://www.w3.org/2000/svg"
156-
width="32"
157-
height="32"
158-
viewBox="0 0 24 24"
159-
>
160-
<path
161-
fill="none"
162-
stroke="currentColor"
163-
stroke-linecap="round"
164-
stroke-linejoin="round"
165-
stroke-width="2"
166-
d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572"
167-
/>
168-
</svg>`
133+
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500"></i>`
134+
: html`<i slot="icon" class="i-mingcute-heart-line size-4"></i>`
169135
}
170136
</base-comment-item-action>
171137
@@ -178,22 +144,7 @@ export class CommentItem extends LitElement {
178144
.text="${`${this.comment?.status?.visibleReplyCount || 0}`}"
179145
@click="${this.handleShowReplies}"
180146
>
181-
<svg
182-
slot="icon"
183-
xmlns="http://www.w3.org/2000/svg"
184-
width="32"
185-
height="32"
186-
viewBox="0 0 24 24"
187-
>
188-
<path
189-
fill="none"
190-
stroke="currentColor"
191-
stroke-linecap="round"
192-
stroke-linejoin="round"
193-
stroke-width="2"
194-
d="m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501C16.608 19.942 11.659 20.922 7.7 19L3 20"
195-
/>
196-
</svg>
147+
<i slot="icon" class="i-tabler:message-circle size-4"></i>
197148
</base-comment-item-action>`
198149
}
199150
${
@@ -203,22 +154,7 @@ export class CommentItem extends LitElement {
203154
.text=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}
204155
@click="${this.handleToggleReplyForm}"
205156
>
206-
<svg
207-
slot="icon"
208-
xmlns="http://www.w3.org/2000/svg"
209-
width="32"
210-
height="32"
211-
viewBox="0 0 24 24"
212-
>
213-
<path
214-
fill="none"
215-
stroke="currentColor"
216-
stroke-linecap="round"
217-
stroke-linejoin="round"
218-
stroke-width="2"
219-
d="M12.007 19.98A9.869 9.869 0 0 1 7.7 19L3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c1.992 1.7 2.93 4.04 2.747 6.34M16 19h6m-3-3v6"
220-
/>
221-
</svg>
157+
<i slot="icon" class="i-tabler:message-circle-plus size-4"></i>
222158
</base-comment-item-action>`
223159
: ''
224160
}
@@ -251,13 +187,15 @@ export class CommentItem extends LitElement {
251187
varStyles,
252188
baseStyles,
253189
css`
190+
254191
.item__action--upvote {
255192
margin-left: -0.5em;
256193
}
257194
258195
.item__reply-form {
259196
margin-top: 0.5em;
260197
}
198+
@unocss-placeholder;
261199
`,
262200
];
263201
}

‎packages/comment-widget/src/comment-pagination.ts‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -56,21 +56,7 @@ export class CommentPagination extends LitElement {
5656
return pageNumbers.map((number) => {
5757
if (number === '...') {
5858
return html`<li class="pagination__dot">
59-
<svg
60-
width="15"
61-
height="15"
62-
viewBox="0 0 15 15"
63-
fill="none"
64-
xmlns="http://www.w3.org/2000/svg"
65-
class="h-4 w-4"
66-
>
67-
<path
68-
d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z"
69-
fill="currentColor"
70-
fill-rule="evenodd"
71-
clip-rule="evenodd"
72-
></path>
73-
</svg>
59+
<i class="i-tabler:dots size-4"></i>
7460
</li>`;
7561
} else {
7662
return html`<li class="pagination__number ${this.page === number ? 'active' : ''}">
@@ -99,16 +85,7 @@ export class CommentPagination extends LitElement {
9985
<ul class="pagination">
10086
<li class="pagination__button">
10187
<button @click=${() => this.gotoPage(this.page - 1)} ?disabled=${this.page === 1}>
102-
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
103-
<path
104-
fill="none"
105-
stroke="#888888"
106-
stroke-linecap="round"
107-
stroke-linejoin="round"
108-
stroke-width="2"
109-
d="m15 6l-6 6l6 6"
110-
/>
111-
</svg>
88+
<i class="i-tabler:chevron-left size-4"></i>
11289
${msg('Previous')}
11390
</button>
11491
</li>
@@ -119,16 +96,7 @@ export class CommentPagination extends LitElement {
11996
?disabled=${this.page === this.totalPages}
12097
>
12198
${msg('Next')}
122-
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
123-
<path
124-
fill="none"
125-
stroke="#888888"
126-
stroke-linecap="round"
127-
stroke-linejoin="round"
128-
stroke-width="2"
129-
d="m9 6l6 6l-6 6"
130-
/>
131-
</svg>
99+
<i class="i-tabler:chevron-right size-4"></i>
132100
</button>
133101
</li>
134102
</ul>
@@ -215,6 +183,8 @@ export class CommentPagination extends LitElement {
215183
width: 100%;
216184
}
217185
}
186+
187+
@unocss-placeholder;
218188
`,
219189
];
220190
}

‎packages/comment-widget/src/lit-toast.ts‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,8 @@ export class LitToast extends LitElement {
2424
>
2525
${
2626
this.type === 'success'
27-
? html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
28-
<g
29-
fill="none"
30-
stroke="#fff"
31-
stroke-linecap="round"
32-
stroke-linejoin="round"
33-
stroke-width="2"
34-
>
35-
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" />
36-
<path d="m9 12l2 2l4-4" />
37-
</g>
38-
</svg>`
39-
: html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
40-
<path
41-
fill="none"
42-
stroke="#fff"
43-
stroke-linecap="round"
44-
stroke-linejoin="round"
45-
stroke-width="2"
46-
d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9-3v4m0 3v.01"
47-
/>
48-
</svg>`
27+
? html`<i class="i-tabler:circle-check size-4 text-white"></i>`
28+
: html`<i class="i-tabler:alert-circle size-4 text-white"></i>`
4929
} <span>${this.message}</span>
5030
</div>`;
5131
}
@@ -111,6 +91,8 @@ export class LitToast extends LitElement {
11191
opacity: 0;
11292
}
11393
}
94+
95+
@unocss-placeholder;
11496
`,
11597
];
11698
}

‎packages/comment-widget/src/reply-item.ts‎

Lines changed: 6 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -133,37 +133,8 @@ export class ReplyItem extends LitElement {
133133
>
134134
${
135135
this.upvoted
136-
? html`<svg
137-
slot="icon"
138-
xmlns="http://www.w3.org/2000/svg"
139-
width="32"
140-
height="32"
141-
viewBox="0 0 24 24"
142-
>
143-
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
144-
<path d="M0 0h24v24H0z" />
145-
<path
146-
fill="red"
147-
d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074z"
148-
/>
149-
</g>
150-
</svg>`
151-
: html`<svg
152-
slot="icon"
153-
xmlns="http://www.w3.org/2000/svg"
154-
width="32"
155-
height="32"
156-
viewBox="0 0 24 24"
157-
>
158-
<path
159-
fill="none"
160-
stroke="currentColor"
161-
stroke-linecap="round"
162-
stroke-linejoin="round"
163-
stroke-width="2"
164-
d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572"
165-
/>
166-
</svg>`
136+
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500"></i>`
137+
: html`<i slot="icon" class="i-mingcute-heart-line size-4"></i>`
167138
}
168139
</base-comment-item-action>
169140
@@ -172,22 +143,7 @@ export class ReplyItem extends LitElement {
172143
@click="${this.handleToggleReplyForm}"
173144
.text=${this.showReplyForm ? msg('Cancel reply') : msg('Reply')}
174145
>
175-
<svg
176-
slot="icon"
177-
xmlns="http://www.w3.org/2000/svg"
178-
width="32"
179-
height="32"
180-
viewBox="0 0 24 24"
181-
>
182-
<path
183-
fill="none"
184-
stroke="currentColor"
185-
stroke-linecap="round"
186-
stroke-linejoin="round"
187-
stroke-width="2"
188-
d="M12.007 19.98A9.869 9.869 0 0 1 7.7 19L3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c1.992 1.7 2.93 4.04 2.747 6.34M16 19h6m-3-3v6"
189-
/>
190-
</svg>
146+
<i slot="icon" class="i-tabler:message-circle-plus size-4"></i>
191147
</base-comment-item-action>
192148
193149
${
@@ -210,17 +166,7 @@ export class ReplyItem extends LitElement {
210166
@mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
211167
@mouseleave=${() => this.handleSetActiveQuoteReply()}
212168
class="item__quote-badge"
213-
><svg
214-
xmlns="http://www.w3.org/2000/svg"
215-
width="1em"
216-
height="1em"
217-
viewBox="0 0 24 24"
218-
>
219-
<path
220-
fill="currentColor"
221-
d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11"
222-
/></svg
223-
><span>${this.quoteReply?.owner.displayName}</span>
169+
><i class="i-ic:round-reply"></i><span>${this.quoteReply?.owner.displayName}</span>
224170
</span>
225171
<br slot="pre-content" />`
226172
: ''
@@ -259,6 +205,8 @@ export class ReplyItem extends LitElement {
259205
text-decoration: underline;
260206
color: #3b82f6;
261207
}
208+
209+
@unocss-placeholder;
262210
`,
263211
];
264212
}

‎packages/comment-widget/src/user-avatar.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,7 @@ export class UserAvatar extends LitElement {
7373

7474
if (this.error) {
7575
return html`<div class="avatar avatar--error">
76-
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
77-
<path
78-
fill="currentColor"
79-
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16Zm-1-5h2v2h-2v-2Zm0-8h2v6h-2V7Z"
80-
/>
81-
</svg>
76+
<i class="i-tabler:alert-circle"></i>
8277
</div>`;
8378
}
8479

@@ -126,6 +121,8 @@ export class UserAvatar extends LitElement {
126121
line-height: 1em;
127122
user-select: none;
128123
}
124+
125+
@unocss-placeholder;
129126
`,
130127
];
131128
}

0 commit comments

Comments
 (0)