diff --git a/.changeset/cold-parents-attack.md b/.changeset/cold-parents-attack.md new file mode 100644 index 000000000..41ab935c6 --- /dev/null +++ b/.changeset/cold-parents-attack.md @@ -0,0 +1,5 @@ +--- +'@codeimage/ui': patch +--- + +Fix RemoteSvgIcon inner content diff --git a/.changeset/wise-coins-decide.md b/.changeset/wise-coins-decide.md new file mode 100644 index 000000000..736cdb7b5 --- /dev/null +++ b/.changeset/wise-coins-decide.md @@ -0,0 +1,5 @@ +--- +'@codeimage/config': patch +--- + +Fix WindowTab attributes diff --git a/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx b/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx index cba3d6ad0..492fe243f 100644 --- a/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx +++ b/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx @@ -29,7 +29,13 @@ export interface WindowTabProps { export function WindowTab( props: ParentProps, ) { - const [, others] = splitProps(props, ['class', 'ref', 'style']); + const [, others] = splitProps(props, [ + 'class', + 'ref', + 'style', + 'rightContent', + 'content', + ]); return (
import('material-icon-theme/icons/css.svg?raw'), + content: () => import('../icons/css.svg?raw'), matcher: /^.*\.(css)$/, }, { diff --git a/packages/config/src/lib/icons/css.svg b/packages/config/src/lib/icons/css.svg new file mode 100644 index 000000000..2574c8e09 --- /dev/null +++ b/packages/config/src/lib/icons/css.svg @@ -0,0 +1,6 @@ + + CSS Logo + A purple square with rounded corners and the letters CSS inside in white + + + diff --git a/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx b/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx index bed8cd0c3..ebad86b62 100644 --- a/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx +++ b/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx @@ -52,8 +52,15 @@ export function RemoteSvgIcon(props: SvgExternalIconProps): JSXElement { const innerHTML = randomizeSvgUrlIds(svgResponse); - return { + const parsedDocument = new DOMParser().parseFromString( innerHTML, + 'text/html', + ); + const svg = parsedDocument.body.childNodes[0] as SVGElement; + + return { + innerHTML: (svg as SVGElement).innerHTML, + viewBox: svg.getAttribute('viewBox') || undefined, }; });