Replies: 3 comments 13 replies
-
|
Hello @ladown, sorry for the late reply, I'll check it out as soon as I have time. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your reply! |
Beta Was this translation helpful? Give feedback.
-
|
Hello @webdiscus! In my free time I tried to find a little more information to make it easier to find a solution to my problem. As I understand it, the file is not initially added to assets in the plugin, because the type is not specified in the webpack configuration file for processing icon files: {
include: /assets[\\/]img[\\/]icons/,
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
outputPath: 'assets/img/icons/',
publicPath: 'auto',
},
},
'svg-transform-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
'preset-default',
{
name: 'removeAttrs',
params: {
attrs: '(fill|stroke|stroke-width|stroke-linecap|stroke-linejoin|fill-opacity|fill-rule|stroke-opacity)',
},
},
],
},
},
],
},I decided to add the missing type. Of the 4 types - Of course, we can reinvent the wheel and use a similar layout for a sprite: mixin icon(props = {})
-
const { name, viewBox } = props;
const iconUrl = require(`@icons/${name}.svg`)
svg(class=`icon icon-${name}` viewBox=viewBox data-test=iconUrl)&attributes(attributes)
use(xlink:href=`assets/img/icons/sprite.svg#${name}`)Then delete unnecessary attributes in P.S. Sorry, I do not know how to reduce the tab size when I insert the code. |
Beta Was this translation helpful? Give feedback.
-
|
the https://github.com/JetBrains/svg-sprite-loader works in JavaScript only, not in a template, because the svg-sprite-loader returns an object, not a string path. Using in JS: import twitterLogo from './logos/twitter.svg';
// twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string>
// Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function>
const rendered = `
<svg viewBox="${twitterLogo.viewBox}">
<use xlink:href="#${twitterLogo.id}" />
</svg>`; |
Beta Was this translation helpful? Give feedback.
-
1. Enable in Webpack config{
test: /\.svg$/,
issuer: /\.(js|ts)$/, // IMPORTANT: use the rule only if SVG file is imported in JS
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
outputPath: 'assets/img/icons/',
publicPath: 'auto',
},
},
'svg-transform-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
'preset-default',
{
name: 'removeAttrs',
params: {
attrs: '(fill|stroke|stroke-width|stroke-linecap|stroke-linejoin|fill-opacity|fill-rule|stroke-opacity)',
},
},
],
},
},
],
},2. Add to
|
Beta Was this translation helpful? Give feedback.
-
|
Hello @webdiscus! P.S. Is it time to write me own plugin/loader for handling this behaviour? xD |
Beta Was this translation helpful? Give feedback.
-
|
@ladown you can write an own pitching-loader. Your loader will get the result of |
Beta Was this translation helpful? Give feedback.
-
|
Yep, sure. |
Beta Was this translation helpful? Give feedback.
-
|
In the new use(href=require(`@icons/${icon}.svg#${name}`)) |
Beta Was this translation helpful? Give feedback.
-
Good afternoon!
In my work I use a personal layout template using pug-plugin. I'm refactoring this template because I want there to be an explicit import of everything that is used in the project, but I ran into a problem when importing icons to create a sprite.
Previously, I imported all the icons into js, via global import in
app.js:It works, but I still want not all icons to load and want to control their loading. I also want HMR to work when adding new icons.
I decided to fix this global import and faced the problem of importing icons in pug mixin . Initially, my mixin looked like this:
In this case, I am referring to an already generated sprite that was created using global import in app.js.
The rewritten version should look like this:
But this option causes errors
You can also reproduce this behavior yourself, for this you can clone my repository using the link -- https://gitlab.com/ladown/ladown-webpack-boilerplate. To run my project, you will need any package manager. I personally use
pnpmand some of the scripts in the package.json is specified using it. Thenode.jsversion from 16.15.0 is also required.You should comment out the global import of icons in the file
src/assets/scripts/app.js:// import '@icons/**/*.svg';You should also fix the mixin for including icons in the
src/views/partials/core/icon.pugfileThen you can try to add the icon on the page
src/views/pages/index/index.pug:I guess I could use some feedback at this point!)
Beta Was this translation helpful? Give feedback.
All reactions