Skip to content

document how to setup a sprite loader for use with svg-store#105

Open
lastobelus wants to merge 2 commits into
DynamoMTL:masterfrom
lastobelus:docs/svg-sprite-loader
Open

document how to setup a sprite loader for use with svg-store#105
lastobelus wants to merge 2 commits into
DynamoMTL:masterfrom
lastobelus:docs/svg-sprite-loader

Conversation

@lastobelus
Copy link
Copy Markdown

No description provided.

Copy link
Copy Markdown
Contributor

@nddery nddery left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot -- I like the idea of providing more guidance on how to use this feature, but I'd like the example to align more with the premise of Shopify Pipeline.

Comment thread README.md
<div data-svgloader='{{ "logos.svg" | asset_url }}'></div>
```

The sprite loader that comes with [webpack-svgstore-plugin]((https://github.com/mrsum/webpack-svgstore-plugin) won't work out of the box, instead given that you have included the above liquid snippet in your theme, this loader will suffice:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have an extra opening parenthesis in the webpack-svgstore-plugin link.

I think we should advocate for writing (and importing) a module instead of putting code directly in a liquid template.

Comment thread README.md

The sprite loader that comes with [webpack-svgstore-plugin]((https://github.com/mrsum/webpack-svgstore-plugin) won't work out of the box, instead given that you have included the above liquid snippet in your theme, this loader will suffice:
```
$('[data-svg-loader]').each(function _loadSvg() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like for this example not to use jQuery, as we do not include it ourselves. Maybe using the fetch API ?

Also, I think the example should follow the Dyanmo's ESLint config - so for example, functions shouldn't start with an underscore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants