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

__spritemap Prefix is Not Replaced During Build #34

Closed
4everTonyStark opened this issue Dec 23, 2023 · 3 comments · Fixed by #36
Closed

__spritemap Prefix is Not Replaced During Build #34

4everTonyStark opened this issue Dec 23, 2023 · 3 comments · Fixed by #36
Assignees
Labels
documentation Improvements or additions to documentation

Comments

@4everTonyStark
Copy link

When runnning the "basic" demo project locally with vite dev, all SVGs load as expected. However, the use and img examples do not load after running vite build followed by vite preview. Examining the built index.html file shows that the __spritemap prefix was not replaced with the name of the output assets/spritemap.<HASH>.svg file.

It also seems that the __spritemap prefix is not replaced in React JSX components upon build, although the plugin works when running vite dev. My React component is the following:

export default function SVGIcon({name, style}) {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      xmlnsXlink='http://www.w3.org/1999/xlink'
      style={{margin: '0 auto', aspectRatio: 1, ...style}}
    >
      <use xlinkHref={`__spritemap#sprite-${name}`} />
    </svg>
  );
}
@4everTonyStark
Copy link
Author

After reading through the library more today, I've discovered the cause of the issue and the fix for it: the 'build' plugin's transform regex is looking for __spritemap with a leading / characater, which I was missing in both my HTML and React component. Adding the leading slash character makes the library replace the /__spritemap string properly in builds for both HTML and React components. As such, can the README and "basic" demo project be updated to add the leading slash accordingly?

@Applelo Applelo self-assigned this Jan 8, 2024
@Applelo Applelo added the documentation Improvements or additions to documentation label Jan 8, 2024
@Applelo
Copy link
Contributor

Applelo commented Jan 8, 2024

Yes you right, my bad on this one. I will push a readme fix on the next version update.

Applelo added a commit that referenced this issue Jan 10, 2024
@Applelo Applelo mentioned this issue Jan 10, 2024
@Applelo
Copy link
Contributor

Applelo commented Jan 10, 2024

Thanks for the issue, it was causing also a bug on Vue compilation x). It is now fix on 2.2.0 ^^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants