WechatIMG1899.jpg
<template>
<div class="app-container">
<div class="icons">
<div
v-for="(item, index) in icons"
:key="index"
class="svgItem"
@click="svgClick(item)"
>
<svg-icon
class="icon"
:icon-class="item"
/>
<p style="font-size:10px;">{{ item }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SvgIconAll',
props: {
svgName: {
type: String,
default: null
}
},
computed: {
icons() {
try {
const data = require.context('@/icons/svg', false, /\.svg$/).keys()
for (const i in data) {
data[i] = data[i].replace(/\.\//g, '').replace(/\.svg/g, '')
}
return data
} catch (e) {
return []
}
}
},
methods: {
svgClick(val) {
this.svgName = val
this.$emit('svgNameClick', this.svgName)
}
}
}
</script>
<style lang="less">
.app-container{
width: 450px;
height: 300px;
padding: 0;
margin:0;
overflow: auto;
.icons{
width: 450;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.svgItem{
width: 100px;
height: 80px;
margin-left:10px;
display: flex;
float: left;
justify-content: center;
align-items: center;
flex-direction: column;
.icon{
width: 20px;
height: 20px;
}
}
}
}
</style>
// 其他页面引入使用
import SvgIconAll from '@/components/svg'
<SvgIconAll @svgNameClick="getSvgName" />
components: {
SvgIconAll
},
