Svg-sprite-loader: Remove symbol from sprite dynamically

[alxpsr]

My angular-component have few svg icons.
Can i remove icon (symbol tag) from svg-sprite when component is will destroyed?

[kisenka]

@alxpsr could you provide an example of usage svg symbols in your application?

[alxpsr]

my-component.component.ts

import { Component } from '@angular/core';

const icons = require.context('./icons', false, /\.svg$/); //get all SVG-icons from component-folder
icons.keys().forEach(icons);

@Component({
    selector   : 'my-component',
    templateUrl: './my-component.html',
})
export class MyComponent {
    constructor() {

    }
}

my-component.html

<div class="my-component">
    <div class="my-component__item">
        <svg class="svg-icon">
            <use xlink:href="#vk"></use>
        </svg>
    </div>
    <div class="my-component__item">
        <svg class="svg-icon">
            <use xlink:href="#twitter"></use>
        </svg>
    </div>
    <div class="my-component__item">
        <svg class="svg-icon">
            <use xlink:href="#facebook"></use>
        </svg>
    </div>
    <div class="my-component__item">
        <svg class="svg-icon">
            <use xlink:href="#youtube"></use>
        </svg>
    </div>
</div>

Webpack build svg-sprite with icons, like this:

<svg>
<symbol viewBox="0 0 15 15" id="vk"></symbol>
<symbol viewBox="0 0 35 35" id="twitter"></symbol>
<symbol viewBox="0 0 45 45" id="facebook"></symbol>
<symbol viewBox="0 0 65 65" id="youtube"></symbol>
<svg>

When angular-route will change - my-component will destroyed, but all svg-icons from them will stay in sprite.

Can i remove these icons from sprite? Maybe this is the wrong way and I should not worry?

P.S. Mojet ya napishu po-russki :D?

[kisenka]

@alxpsr it's possible, but a bit hacky. Human understandable sprite/symbol API is on the way. Here is hacky solution for this time:

// create require context with multiple symbol modules
const iconsRequireContext = require.context('../assets', false, /\.svg$/);

// iterate over the context modules, invoke them and return array of exported values - sprite symbols instances
const icons = iconsRequireContext.keys().map(moduleName => iconsRequireContext(moduleName).default);

// somewhere in your application when you need to destroy symbols
icons.forEach(icon => {
  // this is a hack, in future in can be removed
  icon.node = document.getElementById(icon.id);
  icon.destroy();
});

P.S. Mojet ya napishu po-russki :D?

NET nado speak in russian, because of ostalnoe NE russke Chelovek, which uses etot library, don't ponimaet cirilica. Etot razumny!

[alxpsr]

thank you