Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load SVG files with esbuild's api.LoaderText with in js.Build #9978

Open
zmsy opened this issue Jun 5, 2022 · 9 comments · May be fixed by #12879
Open

Load SVG files with esbuild's api.LoaderText with in js.Build #9978

zmsy opened this issue Jun 5, 2022 · 9 comments · May be fixed by #12879

Comments

@zmsy
Copy link

zmsy commented Jun 5, 2022

On my site I've got a custom color theme selector, and I've got a Preact element where I'd like to inline an SVG so I can apply styles to it, and make it responsive to CSS custom properties. This is currently achieved using a custom Figure component:

// Figure.tsx

import { FunctionComponent } from "preact";

export const Figure: FunctionComponent<{ svg: string }> = ({ svg }) => {
  // This "color-responsive-svg" class adds a number of selectors for the paths, etc within the svg to
  // make them response to various css custom properties, and then the actual SVG file gets inlined
  // here as a child element.
  return (
    <figure class="color-responsive-svg" dangerouslySetInnerHTML={{ __html: svg }} />
  );
};

Below, using the component like so doesn't work. You'll get something akin to JSBUILD: failed to transform "ts/index.tsx" (text/tsx): "my-icon.svg:1:0": Unexpected "<"

// NavModal.tsx

import { Figure } from "./Figure";
import myIcon from "./my-icon.svg";

export const NavModal: FunctionComponent = () => {
  return (
    <Figure svg={myIcon} />
  );
};

If you switch the file extension to .txt, you can import the file and render it as expected. This looks like it's because ".svg" is currently not supported in the extensions array: https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134

It looks like loading SVG as text is the documented approach for using this in ESBuild, and that seems like a nice default to me.

@stackkrocket
Copy link

Has this been fixed?

@bep
Copy link
Member

bep commented Jun 7, 2022

@stackkrocket the issue is open and there are no PRs referencing it == not fixed.

@stackkrocket
Copy link

@zmsy I found an ESBuild pluggin that adds supports for ".svg" here

@stackkrocket
Copy link

@bep From, Although I would love to investigate further and take a crack at this for enhancement.

@bep
Copy link
Member

bep commented Jun 7, 2022

From what I understand @zmsy the solution to this is to add ".svg": api.LoaderText here:

https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134

Note that any JavaScript ESBuild plugins you find on the interweb is not relevant for Hugo.

@stackkrocket
Copy link

It is a quick fix actually. I can quickly add this.

@stackkrocket
Copy link

@bep I think I may have missed some few pointer in the contributing guidelines. I wish to correct them and make subsequent adequate changes that fixes this issue.

@zmsy
Copy link
Author

zmsy commented Jun 7, 2022

From what I understand @zmsy the solution to this is to add ".svg": api.LoaderText here:

https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134

Note that any JavaScript ESBuild plugins you find on the interweb is not relevant for Hugo.

This seemed like the case. I haven't had the time yet to actually try building the repo with that change made and testing it, but seems like @stackkrocket is already on it 👍 Seemed like a simple update and just wanted to submit the issue first.

NOTE: For anybody reading this issue - If you're importing SVG files and you don't want Typescript to flag them with an error, you can add a .d.ts file to your top-level assets directory (same level as your tsconfig.json) with the file type defined:

declare module "*.svg" {
  const content: string;
  export default content;
}

@stackkrocket
Copy link

@bep Have you had time to go through my edited commit? It seems I have passed all the checks to make a successful commit/PR.

@bep bep modified the milestones: v0.101.0, v0.102.0 Jun 16, 2022
@bep bep modified the milestones: v0.102.0, v0.103.0 Aug 28, 2022
@bep bep modified the milestones: v0.103.0, v0.104.0 Sep 15, 2022
@bep bep modified the milestones: v0.104.0, v0.105.0 Sep 23, 2022
@bep bep modified the milestones: v0.105.0, v0.106.0 Oct 26, 2022
@bep bep modified the milestones: v0.106.0, v0.107.0 Nov 18, 2022
@bep bep modified the milestones: v0.107.0, v0.108.0 Dec 3, 2022
@bep bep added this to the v0.111.0 milestone Jan 26, 2023
@bep bep modified the milestones: v0.111.0, v0.112.0 Feb 15, 2023
@bep bep modified the milestones: v0.112.0, v0.113.0 Apr 15, 2023
@bep bep modified the milestones: v0.113.0, v0.115.0 Jun 13, 2023
@bep bep modified the milestones: v0.115.0, v0.116.0 Jun 30, 2023
@bep bep modified the milestones: v0.116.0, v0.117.0 Aug 1, 2023
@bep bep modified the milestones: v0.117.0, v0.118.0 Aug 30, 2023
@bep bep modified the milestones: v0.118.0, v0.119.0 Sep 15, 2023
@bep bep modified the milestones: v0.119.0, v0.120.0 Oct 5, 2023
@bep bep modified the milestones: v0.120.0, v0.121.0 Oct 31, 2023
@bep bep modified the milestones: v0.121.0, v0.122.0 Dec 6, 2023
@bep bep modified the milestones: v0.122.0, v0.123.0, v0.124.0 Jan 27, 2024
@bep bep modified the milestones: v0.124.0, v0.125.0 Mar 4, 2024
@bep bep modified the milestones: v0.125.0, Unscheduled Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants