Skip to content

Commit 576de51

Browse files
Gerrit0Gerrit0
committed
Remove undesirable css attributes from icons
1 parent 9b17dce commit 576de51

File tree

4 files changed

+37
-216
lines changed

4 files changed

+37
-216
lines changed

‎src/lib/output/plugins/IconsPlugin.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ICONS_JS = `
1111
function addIcons() {
1212
if (document.readyState === "loading") return document.addEventListener("DOMContentLoaded", addIcons);
1313
const svg = document.body.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
14-
svg.innerHTML = \`"SVG_HTML"\`;
14+
svg.innerHTML = \`SVG_HTML\`;
1515
svg.style.display = "none";
1616
if (location.protocol === "file:") updateUseElements();
1717
}
@@ -49,7 +49,11 @@ export class IconsPlugin extends RendererComponent {
4949
const icons = (this.owner.theme as DefaultTheme).icons;
5050

5151
for (const [name, icon] of Object.entries(icons)) {
52-
children.push(<g id={`icon-${name}`}>{icon.call(icons).children}</g>);
52+
children.push(
53+
<g id={`icon-${name}`} class="tsd-no-select">
54+
{icon.call(icons).children}
55+
</g>,
56+
);
5357
}
5458

5559
const svg = renderElement(<svg xmlns="http://www.w3.org/2000/svg">{children}</svg>);

‎src/lib/output/themes/default/partials/icon.tsx

+24-202
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ const kindIcon = (letterPath: JSX.Element, color: string, circular = false) => (
1919
</svg>
2020
);
2121

22+
const textIcon = (letter: string, color: string, circular = false) =>
23+
kindIcon(
24+
<text fill="var(--color-icon-text)" x="50%" y="50%" dominant-baseline="central" text-anchor="middle">
25+
{letter}
26+
</text>,
27+
color,
28+
circular,
29+
);
30+
2231
export function buildRefIcons<T extends Record<string, () => JSX.Element>>(
2332
icons: T,
2433
context: DefaultThemeRenderContext,
@@ -50,239 +59,52 @@ export const icons: Record<
5059
ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor" | "folder",
5160
() => JSX.Element
5261
> = {
53-
[ReflectionKind.Accessor]: () =>
54-
kindIcon(
55-
<text
56-
fill="var(--color-icon-text)"
57-
font-family="var(--icon-font-family)"
58-
font-size="var(--icon-font-size)"
59-
font-weight="var(--icon-font-weight)"
60-
font-style="var(--icon-font-style)"
61-
x="6.5"
62-
y="17.5"
63-
>
64-
A
65-
</text>,
66-
"var(--color-ts-accessor)",
67-
true,
68-
),
62+
[ReflectionKind.Accessor]: () => textIcon("A", "var(--color-ts-accessor)", true),
6963
[ReflectionKind.CallSignature]() {
7064
return this[ReflectionKind.Function]();
7165
},
72-
[ReflectionKind.Class]: () =>
73-
kindIcon(
74-
<text
75-
fill="var(--color-icon-text)"
76-
font-family="var(--icon-font-family)"
77-
font-size="var(--icon-font-size)"
78-
font-weight="var(--icon-font-weight)"
79-
font-style="var(--icon-font-style)"
80-
x="6.5"
81-
y="18"
82-
>
83-
C
84-
</text>,
85-
"var(--color-ts-class)",
86-
),
87-
[ReflectionKind.Constructor]: () =>
88-
kindIcon(
89-
<text
90-
fill="var(--color-icon-text)"
91-
font-family="var(--icon-font-family)"
92-
font-size="var(--icon-font-size)"
93-
font-weight="var(--icon-font-weight)"
94-
font-style="var(--icon-font-style)"
95-
x="6"
96-
y="17.5"
97-
>
98-
C
99-
</text>,
100-
"var(--color-ts-constructor)",
101-
true,
102-
),
66+
[ReflectionKind.Class]: () => textIcon("C", "var(--color-ts-class)"),
67+
[ReflectionKind.Constructor]: () => textIcon("C", "var(--color-ts-constructor)", true),
10368
[ReflectionKind.ConstructorSignature]() {
10469
return this[ReflectionKind.Constructor]();
10570
},
106-
[ReflectionKind.Enum]: () =>
107-
kindIcon(
108-
<text
109-
fill="var(--color-icon-text)"
110-
font-family="var(--icon-font-family)"
111-
font-size="var(--icon-font-size)"
112-
font-weight="var(--icon-font-weight)"
113-
font-style="var(--icon-font-style)"
114-
x="7"
115-
y="17.5"
116-
>
117-
E
118-
</text>,
119-
"var(--color-ts-enum)",
120-
),
71+
[ReflectionKind.Enum]: () => textIcon("E", "var(--color-ts-enum)"),
12172
[ReflectionKind.EnumMember]() {
12273
return this[ReflectionKind.Property]();
12374
},
124-
[ReflectionKind.Function]: () =>
125-
kindIcon(
126-
<text
127-
fill="var(--color-icon-text)"
128-
font-family="var(--icon-font-family)"
129-
font-size="var(--icon-font-size)"
130-
font-weight="var(--icon-font-weight)"
131-
font-style="var(--icon-font-style)"
132-
x="7"
133-
y="18"
134-
>
135-
F
136-
</text>,
137-
"var(--color-ts-function)",
138-
),
75+
[ReflectionKind.Function]: () => textIcon("F", "var(--color-ts-function)"),
13976
[ReflectionKind.GetSignature]() {
14077
return this[ReflectionKind.Accessor]();
14178
},
14279
[ReflectionKind.IndexSignature]() {
14380
return this[ReflectionKind.Property]();
14481
},
145-
[ReflectionKind.Interface]: () =>
146-
kindIcon(
147-
<text
148-
fill="var(--color-icon-text)"
149-
font-family="var(--icon-font-family)"
150-
font-size="var(--icon-font-size)"
151-
font-weight="var(--icon-font-weight)"
152-
font-style="var(--icon-font-style)"
153-
x="10"
154-
y="18"
155-
>
156-
I
157-
</text>,
158-
"var(--color-ts-interface)",
159-
),
160-
[ReflectionKind.Method]: () =>
161-
kindIcon(
162-
<text
163-
fill="var(--color-icon-text)"
164-
font-family="var(--icon-font-family)"
165-
font-size="var(--icon-font-size)"
166-
font-weight="var(--icon-font-weight)"
167-
font-style="var(--icon-font-style)"
168-
x="5"
169-
y="17.5"
170-
>
171-
M
172-
</text>,
173-
"var(--color-ts-method)",
174-
true,
175-
),
176-
[ReflectionKind.Module]: () =>
177-
kindIcon(
178-
<text
179-
fill="var(--color-icon-text)"
180-
font-family="var(--icon-font-family)"
181-
font-size="var(--icon-font-size)"
182-
font-weight="var(--icon-font-weight)"
183-
font-style="var(--icon-font-style)"
184-
x="5"
185-
y="17.5"
186-
>
187-
M
188-
</text>,
189-
"var(--color-ts-module)",
190-
),
191-
[ReflectionKind.Namespace]: () =>
192-
kindIcon(
193-
<text
194-
fill="var(--color-icon-text)"
195-
font-family="var(--icon-font-family)"
196-
font-size="var(--icon-font-size)"
197-
font-weight="var(--icon-font-weight)"
198-
font-style="var(--icon-font-style)"
199-
x="6"
200-
y="18"
201-
>
202-
N
203-
</text>,
204-
"var(--color-ts-namespace)",
205-
),
82+
[ReflectionKind.Interface]: () => textIcon("I", "var(--color-ts-interface)"),
83+
[ReflectionKind.Method]: () => textIcon("M", "var(--color-ts-method)", true),
84+
[ReflectionKind.Module]: () => textIcon("M", "var(--color-ts-module)"),
85+
[ReflectionKind.Namespace]: () => textIcon("N", "var(--color-ts-namespace)"),
20686
[ReflectionKind.Parameter]() {
20787
return this[ReflectionKind.Property]();
20888
},
20989
[ReflectionKind.Project]() {
21090
return this[ReflectionKind.Module]();
21191
},
212-
[ReflectionKind.Property]: () =>
213-
kindIcon(
214-
<text
215-
fill="var(--color-icon-text)"
216-
font-family="var(--icon-font-family)"
217-
font-size="var(--icon-font-size)"
218-
font-weight="var(--icon-font-weight)"
219-
font-style="var(--icon-font-style)"
220-
x="7.5"
221-
y="18"
222-
>
223-
P
224-
</text>,
225-
"var(--color-ts-property)",
226-
true,
227-
),
228-
[ReflectionKind.Reference]: () =>
229-
kindIcon(
230-
<text
231-
fill="var(--color-icon-text)"
232-
font-family="var(--icon-font-family)"
233-
font-size="var(--icon-font-size)"
234-
font-weight="var(--icon-font-weight)"
235-
font-style="var(--icon-font-style)"
236-
x="7"
237-
y="17.5"
238-
>
239-
R
240-
</text>,
241-
"var(--color-ts-reference)",
242-
true,
243-
),
92+
[ReflectionKind.Property]: () => textIcon("P", "var(--color-ts-property)", true),
93+
[ReflectionKind.Reference]: () => textIcon("R", "var(--color-ts-reference)", true),
24494
[ReflectionKind.SetSignature]() {
24595
return this[ReflectionKind.Accessor]();
24696
},
247-
[ReflectionKind.TypeAlias]: () =>
248-
kindIcon(
249-
<text
250-
fill="var(--color-icon-text)"
251-
font-family="var(--icon-font-family)"
252-
font-size="var(--icon-font-size)"
253-
font-weight="var(--icon-font-weight)"
254-
font-style="var(--icon-font-style)"
255-
x="7"
256-
y="17.5"
257-
>
258-
T
259-
</text>,
260-
"var(--color-ts-type-alias)",
261-
),
97+
[ReflectionKind.TypeAlias]: () => textIcon("T", "var(--color-ts-type-alias)"),
26298
[ReflectionKind.TypeLiteral]() {
26399
return this[ReflectionKind.TypeAlias]();
264100
},
265101
[ReflectionKind.TypeParameter]() {
266102
return this[ReflectionKind.TypeAlias]();
267103
},
268-
[ReflectionKind.Variable]: () =>
269-
kindIcon(
270-
<text
271-
fill="var(--color-icon-text)"
272-
font-family="var(--icon-font-family)"
273-
font-size="var(--icon-font-size)"
274-
font-weight="var(--icon-font-weight)"
275-
font-style="var(--icon-font-style)"
276-
x="7"
277-
y="18"
278-
>
279-
V
280-
</text>,
281-
"var(--color-ts-variable)",
282-
),
104+
[ReflectionKind.Variable]: () => textIcon("V", "var(--color-ts-variable)"),
283105
[ReflectionKind.Document]: () =>
284106
kindIcon(
285-
<g stroke="var(--color-text)" fill="none" stroke-width="1.5">
107+
<g stroke="var(--color-icon-text)" fill="none" stroke-width="1.5">
286108
<polygon points="6,5 6,19 18,19, 18,10 13,5" />
287109
<line x1="9" y1="9" x2="13" y2="9" />
288110
<line x1="9" y1="12" x2="15" y2="12" />
@@ -292,7 +114,7 @@ export const icons: Record<
292114
),
293115
folder: () =>
294116
kindIcon(
295-
<g stroke="var(--color-text)" fill="none" stroke-width="1.5">
117+
<g stroke="var(--color-icon-text)" fill="none" stroke-width="1.5">
296118
<polygon points="5,5 10,5 12,8 19,8 19,18 5,18" />
297119
</g>,
298120
"var(--color-document)",

‎src/lib/utils/jsx.elements.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1174,7 +1174,7 @@ export interface JsxUseElementProps
11741174
/**
11751175
* Properties permitted on the `<text>` element.
11761176
*
1177-
* Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
1177+
* Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
11781178
*/
11791179
export interface JsxTextElementProps
11801180
extends JsxSvgCoreProps,

‎static/style.css

+6-11
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,6 @@
9696

9797
--dark-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23fff' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
9898
--dark-color-scheme: dark;
99-
100-
--icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
101-
"Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
102-
"Segoe UI Emoji";
103-
--icon-font-size: 16px;
104-
--icon-font-weight: normal;
105-
--icon-font-style: normal;
10699
}
107100

108101
@media (prefers-color-scheme: light) {
@@ -910,17 +903,19 @@ a.tsd-index-link {
910903
margin-bottom: 0.75rem;
911904
}
912905

906+
.tsd-no-select {
907+
-webkit-user-select: none;
908+
-moz-user-select: none;
909+
-ms-user-select: none;
910+
user-select: none;
911+
}
913912
.tsd-kind-icon {
914913
margin-right: 0.5rem;
915914
width: 1.25rem;
916915
height: 1.25rem;
917916
min-width: 1.25rem;
918917
min-height: 1.25rem;
919918
}
920-
.tsd-kind-icon path {
921-
transform-origin: center;
922-
transform: scale(1.1);
923-
}
924919
.tsd-signature > .tsd-kind-icon {
925920
margin-right: 0.8rem;
926921
}

0 commit comments

Comments
 (0)