Prefix icon ids to avoid conflicts
This commit is contained in:
parent
c73e2682eb
commit
8fb37cccec
@ -39,7 +39,7 @@ export default {
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
iconPath() {
|
iconPath() {
|
||||||
return `#${this.name}`;
|
return `#icon--${this.name}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
className() {
|
className() {
|
||||||
|
@ -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 => {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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 => {
|
||||||
|
@ -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);
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user