Shikong/vite-vue2-starter
1
0
Fork 0
mirror of https://github.com/lstoeferle/vite-vue2-starter synced 2025-05-11 02:58:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: use vite-plugin-icons

Browse Source
This commit is contained in:
Anthony Fu 2021-02-28 04:13:36 +08:00
parent dfd5190bae
commit 4f30cb6cdf
11 changed files with 89 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "vite-vue2-example",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
@ -25,7 +26,8 @@
"eslint-plugin-vue": "7.6.0",
"prettier": "2.2.1",
"vite": "2.0.3",
"vite-plugin-components": "0.7.3",
"vite-plugin-components": "0.7.5",
"vite-plugin-icons": "^0.3.2",
"vite-plugin-vue2": "1.2.1",
"vite-plugin-windicss": "0.5.4"
}
@ -454,6 +456,19 @@
"node": "^10.12.0 || >=12.0.0"
}
},
"node_modules/@iconify/json": {
"version": "1.1.309",
"resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
"integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
"dev": true,
"peer": true
},
"node_modules/@iconify/json-tools": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/@iconify/json-tools/-/json-tools-1.0.10.tgz",
"integrity": "sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==",
"dev": true
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@ -4716,11 +4731,10 @@
}
},
"node_modules/vite-plugin-components": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.3.tgz",
"integrity": "sha512-OomlwTsyZn8M1xhth7gUxOE2FJZ1v/wn/TQhcJiFCxcsFnxvRiCMleRHzFrJUdRcN0QiM3lTCX3sKRthdOd+9w==",
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.5.tgz",
"integrity": "sha512-Sly+l1GMRqLeeOFXc9uT1wJUSZQ0LP/65h/c4NK9CWdw2HhHBuB/yyp3ocPLfaq2k+KUeIX2J/Vco/G4hGAy4w==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": "^3.5.1",
"debug": "^4.3.2",
@ -4734,6 +4748,24 @@
"vite": "^2.0.0-beta.69"
}
},
"node_modules/vite-plugin-icons": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/vite-plugin-icons/-/vite-plugin-icons-0.3.2.tgz",
"integrity": "sha512-6HDBO6aqJLaJ8lkT9FChAUtniRRzhDWbhNzJLfT7QdDcQ2kaapReksngNEA1+tNlFd5Auey4VGS2VjI3V1KkvA==",
"dev": true,
"dependencies": {
"@iconify/json-tools": "^1.0.10",
"vue-template-es2015-compiler": "^1.9.1"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@iconify/json": "*",
"@vue/compiler-sfc": "^3.0.2",
"vue-template-compiler": "^2.6.12"
}
},
"node_modules/vite-plugin-vue2": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/vite-plugin-vue2/-/vite-plugin-vue2-1.2.1.tgz",
@ -5304,6 +5336,19 @@
"strip-json-comments": "^3.1.1"
}
},
"@iconify/json": {
"version": "1.1.309",
"resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
"integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
"dev": true,
"peer": true
},
"@iconify/json-tools": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/@iconify/json-tools/-/json-tools-1.0.10.tgz",
"integrity": "sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==",
"dev": true
},
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@ -8686,9 +8731,9 @@
}
},
"vite-plugin-components": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.3.tgz",
"integrity": "sha512-OomlwTsyZn8M1xhth7gUxOE2FJZ1v/wn/TQhcJiFCxcsFnxvRiCMleRHzFrJUdRcN0QiM3lTCX3sKRthdOd+9w==",
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.5.tgz",
"integrity": "sha512-Sly+l1GMRqLeeOFXc9uT1wJUSZQ0LP/65h/c4NK9CWdw2HhHBuB/yyp3ocPLfaq2k+KUeIX2J/Vco/G4hGAy4w==",
"dev": true,
"requires": {
"chokidar": "^3.5.1",
@ -8697,6 +8742,16 @@
"minimatch": "^3.0.4"
}
},
"vite-plugin-icons": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/vite-plugin-icons/-/vite-plugin-icons-0.3.2.tgz",
"integrity": "sha512-6HDBO6aqJLaJ8lkT9FChAUtniRRzhDWbhNzJLfT7QdDcQ2kaapReksngNEA1+tNlFd5Auey4VGS2VjI3V1KkvA==",
"dev": true,
"requires": {
"@iconify/json-tools": "^1.0.10",
"vue-template-es2015-compiler": "^1.9.1"
}
},
"vite-plugin-vue2": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/vite-plugin-vue2/-/vite-plugin-vue2-1.2.1.tgz",

3
package.json
View File

@ -27,7 +27,8 @@
"eslint-plugin-vue": "7.6.0",
"prettier": "2.2.1",
"vite": "2.0.3",
"vite-plugin-components": "0.7.3",
"vite-plugin-components": "0.7.5",
"vite-plugin-icons": "^0.3.2",
"vite-plugin-vue2": "1.2.1",
"vite-plugin-windicss": "0.5.4"
},

2
src/components/Feature.vue
View File

@ -16,7 +16,7 @@
class="inline-flex items-center mt-3 text-green-500"
>
Learn More
<IconArrow />
<mdi-arrow-right class="ml-1" />
</a>
</div>
</div>

7
src/components/Features.vue
View File

@ -35,6 +35,13 @@
url="https://github.com/windicss/vite-plugin-windicss"
/>
</div>
<div class="w-full py-4 pl-4 xs:pr-4 md:w-1/3">
<Feature
title="vite-plugin-icons"
text="Access thousands of icons as Vue components in Vite"
url="https://github.com/antfu/vite-plugin-icons"
/>
</div>
</div>
</section>
</template>

9
src/components/Navbar.vue
View File

@ -33,22 +33,21 @@
class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
to="/aliens"
>
<IconAlien />
<mdi-alien />
</router-link>
<a
href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
target="_blank"
class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
>
<IconGithub />
<mdi-github />
</a>
<button
@click="toggle"
class="flex items-center justify-center w-9 h-9 focus:outline-none"
:class="{ 'text-yellow-500': isDark, 'text-gray-800': !isDark }"
>
<IconSun v-if="isDark" />
<IconMoon v-else />
<mdi-white-balance-sunny class="text-yellow-500" v-if="isDark" />
<mdi-moon-waning-crescent class="text-gray-800" v-else />
</button>
</nav>
<div></div>

8
src/components/icons/IconAlien.vue
View File

@ -1,8 +0,0 @@
<template>
<svg focusable="false" width="1em" height="1em" viewBox="0 0 24 24">
<path
d="M12 3c4.97 0 9 3.58 9 8s-6 10-9 10s-9-5.58-9-10s4.03-8 9-8m-1.69 7.93C9.29 9.29 7.47 8.58 6.25 9.34c-1.22.76-1.38 2.71-.36 4.35c1.03 1.64 2.85 2.35 4.07 1.59c1.22-.78 1.37-2.71.35-4.35m3.38 0c-1.02 1.64-.87 3.57.35 4.35c1.22.76 3.04.05 4.07-1.59c1.02-1.64.86-3.59-.36-4.35c-1.22-.76-3.04-.05-4.06 1.59M12 17.75c-2 0-2.5-.75-2.5-.75c0 .03.5 2 2.5 2s2.5-2 2.5-2s-.5.75-2.5.75z"
fill="currentColor"
></path>
</svg>
</template>

13
src/components/icons/IconArrow.vue
View File

@ -1,13 +0,0 @@
<template>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</template>

8
src/components/icons/IconGithub.vue
View File

@ -1,8 +0,0 @@
<template>
<svg focusable="false" width="1em" height="1em" viewBox="0 0 24 24">
<path
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"
fill="currentColor"
></path>
</svg>
</template>

20
src/components/icons/IconMoon.vue
View File

@ -1,20 +0,0 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
focusable="false"
role="img"
class="iconify iconify--mdi"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
style="transform: rotate(360deg)"
>
<path
d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12z"
fill="currentColor"
></path>
</svg>
</template>

20
src/components/icons/IconSun.vue
View File

@ -1,20 +0,0 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
focusable="false"
role="img"
class="iconify iconify--mdi"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
style="transform: rotate(360deg)"
>
<path
d="M3.55 18.54l1.41 1.41l1.8-1.79l-1.42-1.42M11 22.45h2V19.5h-2m1-14a6 6 0 0 0-6 6a6 6 0 0 0 6 6a6 6 0 0 0 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.66l1.8 1.79l1.41-1.41l-1.79-1.8m1.79-12.28l-1.41-1.41l-1.8 1.79l1.42 1.42M13 .55h-2V3.5h2m-9 7H1v2h3m2.76-7.66l-1.8-1.79l-1.41 1.41l1.79 1.8l1.42-1.42z"
fill="currentColor"
></path>
</svg>
</template>

14
vite.config.js
View File

@ -3,6 +3,7 @@ import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import ViteComponents from "vite-plugin-components";
import WindiCSS from "vite-plugin-windicss";
import ViteIcons, { ViteIconsResolver } from "vite-plugin-icons";
const config = defineConfig({
resolve: {
@ -17,8 +18,17 @@ const config = defineConfig({
},
plugins: [
createVuePlugin({}),
ViteComponents({ transformer: "vue2" }),
createVuePlugin(),
ViteComponents({
customComponentResolvers: [
ViteIconsResolver({
componentPrefix: "",
}),
],
}),
ViteIcons({
defaultStyle: "",
}),
WindiCSS(),
],