Prefix icon ids to avoid conflicts

This commit is contained in:
James Lyne 2021-05-27 15:14:47 +01:00
parent c73e2682eb
commit 8fb37cccec
7 changed files with 11 additions and 11 deletions

View File

@ -39,7 +39,7 @@ export default {
computed: { computed: {
iconPath() { iconPath() {
return `#${this.name}`; return `#icon--${this.name}`;
}, },
className() { className() {

View File

@ -36,7 +36,7 @@ export class ChatControl extends Control {
chatButton.title = useStore().state.messages.chatTitle; chatButton.title = useStore().state.messages.chatTitle;
chatButton.innerHTML = ` chatButton.innerHTML = `
<svg class="svg-icon"> <svg class="svg-icon">
<use xlink:href="#chat" /> <use xlink:href="#icon--chat" />
</svg>`; </svg>`;
chatButton.addEventListener('click', e => { chatButton.addEventListener('click', e => {

View File

@ -68,11 +68,11 @@ export class ClockControl extends Control {
this._sun!.innerHTML = ` this._sun!.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#clock_sun" /> <use xlink:href="#icon--clock_sun" />
</svg>`; </svg>`;
this._moon!.innerHTML = ` this._moon!.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#clock_moon" /> <use xlink:href="#icon--clock_moon" />
</svg>`; </svg>`;
if (this.options.showDigitalClock) { if (this.options.showDigitalClock) {
@ -155,7 +155,7 @@ export class ClockControl extends Control {
if(this._sun && this._currentSunIcon !== icon) { if(this._sun && this._currentSunIcon !== icon) {
this._sun!.innerHTML = ` this._sun!.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#${icon}" /> <use xlink:href="#icon--${icon}" />
</svg>`; </svg>`;
this._currentSunIcon = icon; this._currentSunIcon = icon;
} }
@ -165,7 +165,7 @@ export class ClockControl extends Control {
if(this._moon && this._currentMoonIcon !== icon) { if(this._moon && this._currentMoonIcon !== icon) {
this._moon!.innerHTML = ` this._moon!.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#${icon}" /> <use xlink:href="#icon--${icon}" />
</svg>`; </svg>`;
this._currentMoonIcon = icon; this._currentMoonIcon = icon;
} }

View File

@ -60,7 +60,7 @@ export class DynmapLayerControl extends Control.Layers {
this._layersLink!.setAttribute('aria-expanded', 'false'); this._layersLink!.setAttribute('aria-expanded', 'false');
this._layersLink!.innerHTML = ` this._layersLink!.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#layers" /> <use xlink:href="#icon--layers" />
</svg>`; </svg>`;
return element; return element;
@ -135,7 +135,7 @@ export class DynmapLayerControl extends Control.Layers {
item.appendChild(input); item.appendChild(input);
item.insertAdjacentHTML('beforeend', ` item.insertAdjacentHTML('beforeend', `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#checkbox" /> <use xlink:href="#icon--checkbox" />
</svg>`); </svg>`);
item.appendChild(label); item.appendChild(label);

View File

@ -38,7 +38,7 @@ export class LinkControl extends Control {
linkButton.title = useStore().state.messages.linkTitle; linkButton.title = useStore().state.messages.linkTitle;
linkButton.innerHTML = ` linkButton.innerHTML = `
<svg class="svg-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="#link" /> <use xlink:href="#icon--link" />
</svg>`; </svg>`;
linkButton.addEventListener('click', e => { linkButton.addEventListener('click', e => {

View File

@ -56,7 +56,7 @@ export class LoadingControl extends Control {
this._loadingIndicator.hidden = true; this._loadingIndicator.hidden = true;
this._loadingIndicator.innerHTML = ` this._loadingIndicator.innerHTML = `
<svg class="svg-icon"> <svg class="svg-icon">
<use xlink:href="#loading" /> <use xlink:href="#icon--loading" />
</svg>`; </svg>`;
this._addLayerListeners(map); this._addLayerListeners(map);

View File

@ -8,7 +8,7 @@ import analyze from 'rollup-plugin-analyzer';
export default defineConfig({ export default defineConfig({
plugins: [vue(), analyze(), svgSpritePlugin({ plugins: [vue(), analyze(), svgSpritePlugin({
symbolId: (name) => name, symbolId: (name) => `icon--${name}`,
})], })],
base: './', base: './',
server: { server: {