mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-30 11:16:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): update demo block playground icon (#5052)

Browse Source 
- Update playground icon and update the icon for github, copy, source-code for alignment
This commit is contained in:
jeremywu 2021-12-30 17:48:34 +08:00 committed by GitHub
parent 10e231168a
commit fe0bcd16ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/.vitepress/vitepress/components/icons/copy-icon.vue
View File

@ -1,8 +1,13 @@
<template>
<svg viewBox="0 0 24 24">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"
fill="currentColor"
></path>
/>
</svg>
</template>

16
docs/.vitepress/vitepress/components/icons/github.vue
View File

@ -1,14 +1,18 @@
<template>
<svg viewBox="0 0 16 16">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
fillRule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
fill="currentColor"
></path>
d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
/>
</svg>
</template>
<script>
<script lang="ts">
export default {
name: 'GithubIcon',
}

20
docs/.vitepress/vitepress/components/icons/play-circle-line.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"
/>
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'PlayCircleLineIcon',
})
</script>

13
docs/.vitepress/vitepress/components/icons/source-code.vue
View File

@ -1,8 +1,13 @@
<template>
<svg viewBox="0 0 24 24">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M8.7 15.9L4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4a.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4zm6.6 0l3.9-3.9l-3.9-3.9a.984.984 0 0 1 0-1.4a.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0a.984.984 0 0 1 0-1.4z"
fill="currentColor"
></path>
d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"
/>
</svg>
</template>

6
docs/.vitepress/vitepress/components/vp-demo.vue
View File

@ -9,7 +9,7 @@ import { usePlayGround } from '../composables/use-playground'
import demoBlockLocale from '../../i18n/component/demo-block.json'
import GithubIcon from './icons/github.vue'
import SourceCodeIcon from './icons/source-code.vue'
import PlayGroundIcon from './icons/playground.vue'
import PlayCircleLine from './icons/play-circle-line.vue'
import CopyIcon from './icons/copy-icon.vue'
import Example from './demo/vp-example.vue'
@ -85,7 +85,7 @@ const decodedDescription = computed(() =>
decodeURIComponent(props.description!)
)
const onCodepenClicked = () => {
const onPlaygroundClicked = () => {
const code = usePlayGround(props.rawSource)
window.open(`https://element-plus.run/#${code}`)
}
@ -112,7 +112,7 @@ const copyCode = async () => {
<div class="op-btns">
<ElTooltip :content="locale['edit-in-editor']" :visible-arrow="false">
<ElIcon :size="20" class="op-btn">
<PlayGroundIcon @click="onCodepenClicked" />
<PlayCircleLine @click="onPlaygroundClicked" />
</ElIcon>
</ElTooltip>
<ElTooltip :content="locale['edit-on-github']" :visible-arrow="false">