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

Directly render SVG paths #11618

Closed
silverwind opened this issue May 25, 2020 · 2 comments · Fixed by #12157
Closed

Directly render SVG paths #11618

silverwind opened this issue May 25, 2020 · 2 comments · Fixed by #12157
Labels
type/enhancement An improvement of existing functionality

Comments

@silverwind
Copy link
Member

When clicking through pages, I observe SVGs flashing because apparently the icon rendering needs to wait on the ajax request done in JS to succeed. To prevent this, we should directly render the <path>s without <use> both on server and client which does require a bit of parsing of the generated spritemap but should otherwise be possible.

@silverwind
Copy link
Member Author

silverwind commented Jun 7, 2020

For the client side, we can probably just pre-generate a JSON file to be included in the webpack build based on node_modules/@primer/octicons/build/data.json, possibly extensible to include more icon sets for the future. For server-side, I'm not sure what the best method of building a JSON structure into the binary would be.

@silverwind
Copy link
Member Author

silverwind commented Jun 29, 2020

I think we can do it like this:

  • make a function that loads public/img/svg/icons.svg from either FS or bindata on startup
  • make that function parse the spritesheet to a map and expose a function to get a SVG via name
  • render the full SVG in the svg helper

The client-side only uses like 5 octicons, I think we can just hardcode them there for now. Maybe later create a separate bindata chunk for SVG as it does not need to be in public.

Instead of a spritesheet, it could also just output a easy to parse JSON structure, like https://github.com/kinoheld/webpack-svg-to-json-plugin/blob/master/svg-to-json.js.

@lafriks lafriks added the type/enhancement An improvement of existing functionality label Jul 1, 2020
silverwind added a commit to silverwind/gitea that referenced this issue Jul 12, 2020
Introduce 'make svg' which calls a node script that compiles svg files
to `public/img/svg`. These files are vendored to not create a dependency
on Node for the backend build.

On the frontend side, configure webpack using `raw-loader` so SVGs can
be imported as string.

Also moved our existing SVGs to web_src/svg for consistency.

Fixes: go-gitea#11618
lafriks pushed a commit that referenced this issue Jul 12, 2020
Introduce 'make svg' which calls a node script that compiles svg files
to `public/img/svg`. These files are vendored to not create a dependency
on Node for the backend build.

On the frontend side, configure webpack using `raw-loader` so SVGs can
be imported as string.

Also moved our existing SVGs to web_src/svg for consistency.

Fixes: #11618
@go-gitea go-gitea locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants