SVG icon prerequisites
This commit is contained in:
parent
d28ff9f569
commit
7070353b32
865
package-lock.json
generated
865
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,8 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-class-component": "^8.0.0-0"
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.5.19",
|
||||
@ -27,12 +26,13 @@
|
||||
"eslint": "^7.5.0",
|
||||
"eslint-plugin-vue": "^7.0.0-0",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-pixi-overlay": "^1.8.1",
|
||||
"normalize-scss": "^7.0.1",
|
||||
"pixi.js": "^5.3.3",
|
||||
"sass": "^1.29.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"svgo": "^1.1.0",
|
||||
"svgo-loader": "^2.1.0",
|
||||
"typescript": "~3.9.3",
|
||||
"vue-cli-plugin-svg-sprite": "~1.0.0",
|
||||
"vuex": "^4.0.0-rc.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
47
src/components/SvgIcon.vue
Normal file
47
src/components/SvgIcon.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<svg :class="className" xmlns="http://www.w3.org/2000/svg">
|
||||
<title v-if="title">{{ title }}</title>
|
||||
<use :xlink:href="iconPath" xmlns:xlink="http://www.w3.org/1999/xlink"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'svg-icon',
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconPath() {
|
||||
let icon = require(`@/assets/icons/${this.name}.svg`);
|
||||
if (Object.prototype.hasOwnProperty.call(icon, 'default')) {
|
||||
icon = icon.default;
|
||||
}
|
||||
|
||||
return icon.url;
|
||||
},
|
||||
|
||||
className() {
|
||||
return 'svg-icon svg-icon--' + this.name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.svg-icon {
|
||||
fill: currentColor;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
4
src/index.d.ts
vendored
Normal file
4
src/index.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
@ -1,3 +1,10 @@
|
||||
module.exports = {
|
||||
publicPath: '',
|
||||
}
|
||||
publicPath: '',
|
||||
|
||||
chainWebpack: config => {
|
||||
config.module
|
||||
.rule('svg-sprite')
|
||||
.use('svgo-loader')
|
||||
.loader('svgo-loader')
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user