Skip to content

Commit c8557ff

Browse files
billyvgbillyvg
committed
some svg refactors
1 parent 0e28414 commit c8557ff

File tree

3 files changed

+28
-39
lines changed

3 files changed

+28
-39
lines changed

‎packages/feedback/src/util/setAttributesNS.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Helper function to set a dict of attributes on element (w/ specified namespace)
3+
*/
4+
export function setAttributesNS<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
5+
Object.entries(attributes).forEach(([key, val]) => {
6+
el.setAttributeNS(null, key, val);
7+
});
8+
return el;
9+
}

‎packages/feedback/src/widget/Icon.ts

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { setAttributesNS } from "../util/setAttributesNS";
2+
13
const SIZE = 20;
24
const XMLNS = 'http://www.w3.org/2000/svg';
35

@@ -9,42 +11,36 @@ interface IconReturn {
911
$el: SVGElement;
1012
}
1113

12-
function setAttributes<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
13-
Object.entries(attributes).forEach(([key, val]) => {
14-
el.setAttributeNS(null, key, val);
15-
});
16-
return el;
17-
}
18-
1914
/**
2015
* Feedback Icon
2116
*/
2217
export function Icon({ color }: Props): IconReturn {
23-
const svg = setAttributes(document.createElementNS(XMLNS, 'svg'), {
18+
const cENS = document.createElementNS;
19+
const svg = setAttributesNS(cENS(XMLNS, 'svg'), {
2420
width: `${SIZE}`,
2521
height: `${SIZE}`,
2622
viewBox: `0 0 ${SIZE} ${SIZE}`,
2723
fill: 'none',
2824
});
2925

30-
const g = setAttributes(document.createElementNS(XMLNS, 'g'), {
26+
const g = setAttributesNS(cENS(XMLNS, 'g'), {
3127
clipPath: 'url(#clip0_57_80)',
3228
});
3329

34-
const path = setAttributes(document.createElementNS(XMLNS, 'path'), {
30+
const path = setAttributesNS(cENS(XMLNS, 'path'), {
3531
['fill-rule']: 'evenodd',
3632
['clip-rule']: 'evenodd',
3733
d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
3834
fill: color,
3935
});
4036
svg.appendChild(g).appendChild(path);
4137

42-
const speakerDefs = document.createElementNS(XMLNS, 'defs');
43-
const speakerClipPathDef = setAttributes(document.createElementNS(XMLNS, 'clipPath'), {
38+
const speakerDefs = cENS(XMLNS, 'defs');
39+
const speakerClipPathDef = setAttributesNS(cENS(XMLNS, 'clipPath'), {
4440
id: 'clip0_57_80',
4541
});
4642

47-
const speakerRect = setAttributes(document.createElementNS(XMLNS, 'rect'), {
43+
const speakerRect = setAttributesNS(cENS(XMLNS, 'rect'), {
4844
width: `${SIZE}`,
4945
height: `${SIZE}`,
5046
fill: 'white',

‎packages/feedback/src/widget/SuccessIcon.ts

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { setAttributesNS } from "../util/setAttributesNS";
2+
13
const WIDTH = 16;
24
const HEIGHT = 17;
35
const XMLNS = 'http://www.w3.org/2000/svg';
@@ -10,47 +12,41 @@ interface IconReturn {
1012
$el: SVGElement;
1113
}
1214

13-
function setAttributes<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
14-
Object.entries(attributes).forEach(([key, val]) => {
15-
el.setAttributeNS(null, key, val);
16-
});
17-
return el;
18-
}
19-
2015
/**
2116
* Success Icon (checkmark)
2217
*/
2318
export function SuccessIcon({ color }: Props): IconReturn {
24-
const svg = setAttributes(document.createElementNS(XMLNS, 'svg'), {
19+
const cENS = document.createElementNS;
20+
const svg = setAttributesNS(cENS(XMLNS, 'svg'), {
2521
width: `${WIDTH}`,
2622
height: `${HEIGHT}`,
2723
viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
2824
fill: 'none',
2925
});
3026

31-
const g = setAttributes(document.createElementNS(XMLNS, 'g'), {
27+
const g = setAttributesNS(cENS(XMLNS, 'g'), {
3228
clipPath: 'url(#clip0_57_156)',
3329
});
3430

35-
const path2 = setAttributes(document.createElementNS(XMLNS, 'path'), {
31+
const path2 = setAttributesNS(cENS(XMLNS, 'path'), {
3632
['fill-rule']: 'evenodd',
3733
['clip-rule']: 'evenodd',
3834
d: 'M3.55544 15.1518C4.87103 16.0308 6.41775 16.5 8 16.5C10.1217 16.5 12.1566 15.6571 13.6569 14.1569C15.1571 12.6566 16 10.6217 16 8.5C16 6.91775 15.5308 5.37103 14.6518 4.05544C13.7727 2.73985 12.5233 1.71447 11.0615 1.10897C9.59966 0.503466 7.99113 0.34504 6.43928 0.653721C4.88743 0.962403 3.46197 1.72433 2.34315 2.84315C1.22433 3.96197 0.462403 5.38743 0.153721 6.93928C-0.15496 8.49113 0.00346625 10.0997 0.608967 11.5615C1.21447 13.0233 2.23985 14.2727 3.55544 15.1518ZM4.40546 3.1204C5.46945 2.40946 6.72036 2.03 8 2.03C9.71595 2.03 11.3616 2.71166 12.575 3.92502C13.7883 5.13838 14.47 6.78405 14.47 8.5C14.47 9.77965 14.0905 11.0306 13.3796 12.0945C12.6687 13.1585 11.6582 13.9878 10.476 14.4775C9.29373 14.9672 7.99283 15.0953 6.73777 14.8457C5.48271 14.596 4.32987 13.9798 3.42502 13.075C2.52018 12.1701 1.90397 11.0173 1.65432 9.76224C1.40468 8.50718 1.5328 7.20628 2.0225 6.02404C2.5122 4.8418 3.34148 3.83133 4.40546 3.1204Z',
3935
fill: color,
4036
});
41-
const path = setAttributes(document.createElementNS(XMLNS, 'path'), {
37+
const path = setAttributesNS(cENS(XMLNS, 'path'), {
4238
d: 'M6.68775 12.4297C6.78586 12.4745 6.89218 12.4984 7 12.5C7.11275 12.4955 7.22315 12.4664 7.32337 12.4145C7.4236 12.3627 7.51121 12.2894 7.58 12.2L12 5.63999C12.0848 5.47724 12.1071 5.28902 12.0625 5.11098C12.0178 4.93294 11.9095 4.77744 11.7579 4.67392C11.6064 4.57041 11.4221 4.52608 11.24 4.54931C11.0579 4.57254 10.8907 4.66173 10.77 4.79999L6.88 10.57L5.13 8.56999C5.06508 8.49566 4.98613 8.43488 4.89768 8.39111C4.80922 8.34735 4.713 8.32148 4.61453 8.31498C4.51605 8.30847 4.41727 8.32147 4.32382 8.35322C4.23038 8.38497 4.14413 8.43484 4.07 8.49999C3.92511 8.63217 3.83692 8.81523 3.82387 9.01092C3.81083 9.2066 3.87393 9.39976 4 9.54999L6.43 12.24C6.50187 12.3204 6.58964 12.385 6.68775 12.4297Z',
4339
fill: color,
4440
});
4541

4642
svg.appendChild(g).append(path, path2);
4743

48-
const speakerDefs = document.createElementNS(XMLNS, 'defs');
49-
const speakerClipPathDef = setAttributes(document.createElementNS(XMLNS, 'clipPath'), {
44+
const speakerDefs = cENS(XMLNS, 'defs');
45+
const speakerClipPathDef = setAttributesNS(cENS(XMLNS, 'clipPath'), {
5046
id: 'clip0_57_156',
5147
});
5248

53-
const speakerRect = setAttributes(document.createElementNS(XMLNS, 'rect'), {
49+
const speakerRect = setAttributesNS(cENS(XMLNS, 'rect'), {
5450
width: `${WIDTH}`,
5551
height: `${WIDTH}`,
5652
fill: 'white',
@@ -66,15 +62,3 @@ export function SuccessIcon({ color }: Props): IconReturn {
6662
$el: svg,
6763
};
6864
}
69-
70-
// <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
71-
// <g clip-path="url(#clip0_57_156)">
72-
// <path d="M6.68775 12.4297C6.78586 12.4745 6.89218 12.4984 7 12.5C7.11275 12.4955 7.22315 12.4664 7.32337 12.4145C7.4236 12.3627 7.51121 12.2894 7.58 12.2L12 5.63999C12.0848 5.47724 12.1071 5.28902 12.0625 5.11098C12.0178 4.93294 11.9095 4.77744 11.7579 4.67392C11.6064 4.57041 11.4221 4.52608 11.24 4.54931C11.0579 4.57254 10.8907 4.66173 10.77 4.79999L6.88 10.57L5.13 8.56999C5.06508 8.49566 4.98613 8.43488 4.89768 8.39111C4.80922 8.34735 4.713 8.32148 4.61453 8.31498C4.51605 8.30847 4.41727 8.32147 4.32382 8.35322C4.23038 8.38497 4.14413 8.43484 4.07 8.49999C3.92511 8.63217 3.83692 8.81523 3.82387 9.01092C3.81083 9.2066 3.87393 9.39976 4 9.54999L6.43 12.24C6.50187 12.3204 6.58964 12.385 6.68775 12.4297Z" fill="#268D75"/>
73-
// <path fill-rule="evenodd" clip-rule="evenodd" d="M3.55544 15.1518C4.87103 16.0308 6.41775 16.5 8 16.5C10.1217 16.5 12.1566 15.6571 13.6569 14.1569C15.1571 12.6566 16 10.6217 16 8.5C16 6.91775 15.5308 5.37103 14.6518 4.05544C13.7727 2.73985 12.5233 1.71447 11.0615 1.10897C9.59966 0.503466 7.99113 0.34504 6.43928 0.653721C4.88743 0.962403 3.46197 1.72433 2.34315 2.84315C1.22433 3.96197 0.462403 5.38743 0.153721 6.93928C-0.15496 8.49113 0.00346625 10.0997 0.608967 11.5615C1.21447 13.0233 2.23985 14.2727 3.55544 15.1518ZM4.40546 3.1204C5.46945 2.40946 6.72036 2.03 8 2.03C9.71595 2.03 11.3616 2.71166 12.575 3.92502C13.7883 5.13838 14.47 6.78405 14.47 8.5C14.47 9.77965 14.0905 11.0306 13.3796 12.0945C12.6687 13.1585 11.6582 13.9878 10.476 14.4775C9.29373 14.9672 7.99283 15.0953 6.73777 14.8457C5.48271 14.596 4.32987 13.9798 3.42502 13.075C2.52018 12.1701 1.90397 11.0173 1.65432 9.76224C1.40468 8.50718 1.5328 7.20628 2.0225 6.02404C2.5122 4.8418 3.34148 3.83133 4.40546 3.1204Z" fill="#268D75"/>
74-
// </g>
75-
// <defs>
76-
// <clipPath id="clip0_57_156">
77-
// <rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
78-
// </clipPath>
79-
// </defs>
80-
// </svg>

0 commit comments

Comments
 (0)