Skip to content

Commit

Permalink
Remove undesirable css attributes from icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gerrit0
Gerrit0 committed Oct 11, 2024
1 parent 9b17dce commit 576de51
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 216 deletions.
8 changes: 6 additions & 2 deletions src/lib/output/plugins/IconsPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ICONS_JS = `
function addIcons() {
if (document.readyState === "loading") return document.addEventListener("DOMContentLoaded", addIcons);
const svg = document.body.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
svg.innerHTML = \`"SVG_HTML"\`;
svg.innerHTML = \`SVG_HTML\`;
svg.style.display = "none";
if (location.protocol === "file:") updateUseElements();
}
Expand Down Expand Up @@ -49,7 +49,11 @@ export class IconsPlugin extends RendererComponent {
const icons = (this.owner.theme as DefaultTheme).icons;

for (const [name, icon] of Object.entries(icons)) {
children.push(<g id={`icon-${name}`}>{icon.call(icons).children}</g>);
children.push(
<g id={`icon-${name}`} class="tsd-no-select">
{icon.call(icons).children}
</g>,
);
}

const svg = renderElement(<svg xmlns="http://www.w3.org/2000/svg">{children}</svg>);
Expand Down
226 changes: 24 additions & 202 deletions src/lib/output/themes/default/partials/icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ const kindIcon = (letterPath: JSX.Element, color: string, circular = false) => (
</svg>
);

const textIcon = (letter: string, color: string, circular = false) =>
kindIcon(
<text fill="var(--color-icon-text)" x="50%" y="50%" dominant-baseline="central" text-anchor="middle">
{letter}
</text>,
color,
circular,
);

export function buildRefIcons<T extends Record<string, () => JSX.Element>>(
icons: T,
context: DefaultThemeRenderContext,
Expand Down Expand Up @@ -50,239 +59,52 @@ export const icons: Record<
ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor" | "folder",
() => JSX.Element
> = {
[ReflectionKind.Accessor]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="6.5"
y="17.5"
>
A
</text>,
"var(--color-ts-accessor)",
true,
),
[ReflectionKind.Accessor]: () => textIcon("A", "var(--color-ts-accessor)", true),
[ReflectionKind.CallSignature]() {
return this[ReflectionKind.Function]();
},
[ReflectionKind.Class]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="6.5"
y="18"
>
C
</text>,
"var(--color-ts-class)",
),
[ReflectionKind.Constructor]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="6"
y="17.5"
>
C
</text>,
"var(--color-ts-constructor)",
true,
),
[ReflectionKind.Class]: () => textIcon("C", "var(--color-ts-class)"),
[ReflectionKind.Constructor]: () => textIcon("C", "var(--color-ts-constructor)", true),
[ReflectionKind.ConstructorSignature]() {
return this[ReflectionKind.Constructor]();
},
[ReflectionKind.Enum]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7"
y="17.5"
>
E
</text>,
"var(--color-ts-enum)",
),
[ReflectionKind.Enum]: () => textIcon("E", "var(--color-ts-enum)"),
[ReflectionKind.EnumMember]() {
return this[ReflectionKind.Property]();
},
[ReflectionKind.Function]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7"
y="18"
>
F
</text>,
"var(--color-ts-function)",
),
[ReflectionKind.Function]: () => textIcon("F", "var(--color-ts-function)"),
[ReflectionKind.GetSignature]() {
return this[ReflectionKind.Accessor]();
},
[ReflectionKind.IndexSignature]() {
return this[ReflectionKind.Property]();
},
[ReflectionKind.Interface]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="10"
y="18"
>
I
</text>,
"var(--color-ts-interface)",
),
[ReflectionKind.Method]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="5"
y="17.5"
>
M
</text>,
"var(--color-ts-method)",
true,
),
[ReflectionKind.Module]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="5"
y="17.5"
>
M
</text>,
"var(--color-ts-module)",
),
[ReflectionKind.Namespace]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="6"
y="18"
>
N
</text>,
"var(--color-ts-namespace)",
),
[ReflectionKind.Interface]: () => textIcon("I", "var(--color-ts-interface)"),
[ReflectionKind.Method]: () => textIcon("M", "var(--color-ts-method)", true),
[ReflectionKind.Module]: () => textIcon("M", "var(--color-ts-module)"),
[ReflectionKind.Namespace]: () => textIcon("N", "var(--color-ts-namespace)"),
[ReflectionKind.Parameter]() {
return this[ReflectionKind.Property]();
},
[ReflectionKind.Project]() {
return this[ReflectionKind.Module]();
},
[ReflectionKind.Property]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7.5"
y="18"
>
P
</text>,
"var(--color-ts-property)",
true,
),
[ReflectionKind.Reference]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7"
y="17.5"
>
R
</text>,
"var(--color-ts-reference)",
true,
),
[ReflectionKind.Property]: () => textIcon("P", "var(--color-ts-property)", true),
[ReflectionKind.Reference]: () => textIcon("R", "var(--color-ts-reference)", true),
[ReflectionKind.SetSignature]() {
return this[ReflectionKind.Accessor]();
},
[ReflectionKind.TypeAlias]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7"
y="17.5"
>
T
</text>,
"var(--color-ts-type-alias)",
),
[ReflectionKind.TypeAlias]: () => textIcon("T", "var(--color-ts-type-alias)"),
[ReflectionKind.TypeLiteral]() {
return this[ReflectionKind.TypeAlias]();
},
[ReflectionKind.TypeParameter]() {
return this[ReflectionKind.TypeAlias]();
},
[ReflectionKind.Variable]: () =>
kindIcon(
<text
fill="var(--color-icon-text)"
font-family="var(--icon-font-family)"
font-size="var(--icon-font-size)"
font-weight="var(--icon-font-weight)"
font-style="var(--icon-font-style)"
x="7"
y="18"
>
V
</text>,
"var(--color-ts-variable)",
),
[ReflectionKind.Variable]: () => textIcon("V", "var(--color-ts-variable)"),
[ReflectionKind.Document]: () =>
kindIcon(
<g stroke="var(--color-text)" fill="none" stroke-width="1.5">
<g stroke="var(--color-icon-text)" fill="none" stroke-width="1.5">
<polygon points="6,5 6,19 18,19, 18,10 13,5" />
<line x1="9" y1="9" x2="13" y2="9" />
<line x1="9" y1="12" x2="15" y2="12" />
Expand All @@ -292,7 +114,7 @@ export const icons: Record<
),
folder: () =>
kindIcon(
<g stroke="var(--color-text)" fill="none" stroke-width="1.5">
<g stroke="var(--color-icon-text)" fill="none" stroke-width="1.5">
<polygon points="5,5 10,5 12,8 19,8 19,18 5,18" />
</g>,
"var(--color-document)",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/utils/jsx.elements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1174,7 +1174,7 @@ export interface JsxUseElementProps
/**
* Properties permitted on the `<text>` element.
*
* Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
* Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
*/
export interface JsxTextElementProps
extends JsxSvgCoreProps,
Expand Down
17 changes: 6 additions & 11 deletions static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,6 @@

--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>");
--dark-color-scheme: dark;

--icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji";
--icon-font-size: 16px;
--icon-font-weight: normal;
--icon-font-style: normal;
}

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

.tsd-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tsd-kind-icon {
margin-right: 0.5rem;
width: 1.25rem;
height: 1.25rem;
min-width: 1.25rem;
min-height: 1.25rem;
}
.tsd-kind-icon path {
transform-origin: center;
transform: scale(1.1);
}
.tsd-signature > .tsd-kind-icon {
margin-right: 0.8rem;
}
Expand Down

0 comments on commit 576de51

Please sign in to comment.