zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加svg-sprite-loader

Browse Source
This commit is contained in:
zilong
2021-11-13 14:11:19 +08:00
parent 310cf5efad
commit d37f66b3c2
11 changed files with 450 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/svgs/Play.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M133 440a35.37 35.37 0 0 1-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0 1 35.77.45l247.85 148.36a36 36 0 0 1 0 61l-247.89 148.4A35.5 35.5 0 0 1 133 440z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

40
src/components/svgIcon.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
<use :xlink:href="iconName"/>
</svg>
</template>
<script setup>
import { defineProps, computed } from "vue";
const props = defineProps({
name: {
type: String,
required: true
},
color: {
type: String,
default: ''
}
})
const iconName = computed(()=>`#icon-${props.name}`);
const svgClass = computed(()=> {
console.log(props.name, 'props.name');
if (props.name) {
return `svg-icon icon-${props.name}`
}
return 'svg-icon'
});
</script>
<style lang='less'>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>

2
src/main.js
View File

@@ -3,6 +3,7 @@ import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueLazyLoad from 'vue3-lazyload'
import svgIcon from '@/components/svgIcon.vue'
createApp(App)
.use(store)
@@ -20,4 +21,5 @@ createApp(App)
// }
log: false, //关闭log
})
.component('svg-icon', svgIcon)
.mount("#app");

74
src/plugins/svgBuilder.js Normal file
View File

@@ -0,0 +1,74 @@
import { readFileSync, readdirSync } from 'fs'
let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g
function findSvgFile(dir) {
const svgRes = []
const dirents = readdirSync(dir, {
withFileTypes: true
})
for (const dirent of dirents) {
if (dirent.isDirectory()) {
svgRes.push(...findSvgFile(dir + dirent.name + '/'))
} else {
const svg = readFileSync(dir + dirent.name)
.toString()
.replace(clearReturn, '')
.replace(svgTitle, ($1, $2) => {
// console.log(++i)
// console.log(dirent.name)
let width = 0
let height = 0
let content = $2.replace(
clearHeightWidth,
(s1, s2, s3) => {
if (s2 === 'width') {
width = s3
} else if (s2 === 'height') {
height = s3
}
return ''
}
)
if (!hasViewBox.test($2)) {
content += `viewBox="0 0 ${width} ${height}"`
}
return `<symbol id="${idPerfix}-${dirent.name.replace(
'.svg',
''
)}" ${content}>`
})
.replace('</svg>', '</symbol>')
svgRes.push(svg)
}
}
return svgRes
}
export const svgBuilder = (path, perfix = 'icon') => {
if (path === '') return
idPerfix = perfix
const res = findSvgFile(path)
// console.log(res.length)
// const res = []
return {
name: 'svg-transform',
transformIndexHtml(html) {
return html.replace(
'<body>',
`
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
${res.join('')}
</svg>
`
)
}
}
}

39
src/views/common/SongCtrl.vue
View File

@@ -2,12 +2,6 @@
import { ref, onMounted, onUnmounted, watch } from "vue";
import { useStore } from "vuex";
import { NButton, NIcon, NSpace, useMessage } from "naive-ui";
import PlayCircle from "@/assets/svgs/PlayCircle.svg";
import PlaySkipForward from "@/assets/svgs/PlaySkipForward.svg";
import PlaySkipBack from "@/assets/svgs/PlaySkipBack.svg";
import HeartOutline from "@/assets/svgs/HeartOutline.svg";
import TrashOutline from "@/assets/svgs/TrashOutline.svg";
import PauseCircle from "@/assets/svgs/PauseCircle.svg";
import { getSongUrl } from "@/network/song";
import pubsub from "pubsub-js";
@@ -236,16 +230,12 @@ onUnmounted(() => {
>
<n-button circle @click="favorite">
<template #icon>
<n-icon>
<HeartOutline />
</n-icon>
<svg-icon name="HeartOutline" />
</template>
</n-button>
<n-button circle @click="previous">
<template #icon>
<n-icon>
<PlaySkipBack />
</n-icon>
<svg-icon name="PlaySkipBack" />
</template>
</n-button>
<n-button
@@ -257,9 +247,10 @@ onUnmounted(() => {
@click="resume"
>
<!-- <template #icon> -->
<n-icon>
<PlayCircle />
</n-icon>
<!-- <n-icon> -->
<!-- <PlayCircle /> -->
<svg-icon name="PlayCircle" />
<!-- </n-icon> -->
<!-- </template> -->
</n-button>
<n-button
@@ -270,25 +261,19 @@ onUnmounted(() => {
type="primary"
@click="pause"
>
<!-- <template #icon> -->
<n-icon size="56">
<PauseCircle />
</n-icon>
<!-- </template> -->
<svg-icon name="PauseCircle" />
</n-button>
<!-- <n-button circle color="#18a058"> -->
<n-button circle @click="forward">
<template #icon>
<n-icon>
<PlaySkipForward />
</n-icon>
<!-- <n-icon> -->
<!-- <PlaySkipForward /> -->
<svg-icon name="PlaySkipForward" />
<!-- </n-icon> -->
</template>
</n-button>
<n-button circle @click="removeCurrentSong">
<template #icon>
<n-icon>
<TrashOutline />
</n-icon>
<svg-icon name="TrashOutline" />
</template>
</n-button>
</n-space>

10
src/views/common/Vol.vue
View File

@@ -66,6 +66,7 @@ onUnmounted(() => {
<template>
<div class="wp z-slider">
<div class="bg">
<div class="bg-line"></div>
<div class="content" :style="stySlider()"></div>
<div class="dot" :style="styDot()"></div>
<div class="mask" @click="setSlider"></div>
@@ -88,6 +89,15 @@ export default {};
.bg {
height: 100px;
position: relative;
.bg-line{
position: absolute;
top: 0;
left: 8px;
// right: 0;
bottom: 0;
width: 2px;
background-color: #ddd;
}
.content {
position: absolute;
border-radius: 2px;

23
src/views/discover/Recommend.vue
View File

@@ -43,25 +43,28 @@
:key="song.id"
>
<div class="c2-list">
<div class="play-btn">
<div class="play-btn" @click="play(song.id)">
<img v-lazy="song.album.blurPicUrl" />
<n-button
text
class="start-play-bg"
type="info"
>
<n-icon>
<PlayCircle @click="play(song.id)" />
<PlayCircle />
</n-icon>
</n-button>
<n-button
text
class="start-play"
type="primary"
>
<n-icon>
<Play @click="play(song.id)" />
</n-icon>
<!-- <n-icon>
<Play />
</n-icon> -->
<svg-icon name="Play_" />
</n-button>
</div>
<div class="title">
@@ -364,6 +367,8 @@ getPersonalizedMV()
border-radius: 6px;
.play-mv {
cursor: pointer;
img {
width: 100%;
border-top-left-radius: 6px;
@@ -377,14 +382,14 @@ getPersonalizedMV()
font-size: 38px;
position: absolute;
right: 0px;
bottom: 42px;
bottom: 50px;
color: rgba(255, 255, 255, 0.8);
}
.start-play {
font-size: 25px;
position: absolute;
right: 5px;
bottom: 48px;
bottom: 56px;
}
&:hover {
@@ -418,6 +423,10 @@ getPersonalizedMV()
border-radius: 4px;
border: 1px solid #eee;
.play-btn{
cursor: pointer;
}
img {
width: 60px;
height: 60px;

47
src/views/videos/V.vue
View File

@@ -1,13 +1,46 @@
<script setup>
import { NButton, NSpace, NIcon } from "naive-ui";
import PlayCircle from '@/assets/svgs/PlayCircle.svg'
</script>
<template>
<NSpace>
<NButton>
<template #icon>
<n-icon>
<PlayCircle/>
</n-icon>
</template>
NIcon 按钮
</NButton>
<NButton>
<template #icon>
<n-icon>
<svg-icon name="PlayCircle"></svg-icon>
</n-icon>
</template>
svg-sprite-loader 按钮
</NButton>
<NButton text style="font-size: 40px">
<!-- <template #icon> -->
<n-icon>
<svg-icon name="Dots" />
</n-icon>
<!-- </template> -->
svg-sprite-loader 按钮
</NButton>
<NButton>
<template #icon>
<n-icon>
<svg-icon name="PlayCircle"></svg-icon>
</n-icon>
</template>
svg-sprite-loader 按钮
</NButton>
</NSpace>
</template>
<script>
export default {
}
export default {};
</script>
<style>
</style>
<style></style>