Skip to content

Commit b7007c8

Browse files
aykutkardasaykutkardas
committed
Create module with Vite
1 parent 78d1c6b commit b7007c8

12 files changed

+956
-0
lines changed

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
.vscode

‎index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue Icomoon - Demo</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/main.js"></script>
13+
</body>
14+
15+
</html>

‎package-lock.json

+396
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "vue-icomoon",
3+
"description": "It allows you to simply view the icons in the selection.json file provided by Icomoon.",
4+
"version": "0.1.0",
5+
"author": {
6+
"name": "Aykut Kardaş",
7+
"email": "[email protected]"
8+
},
9+
"license": "MIT",
10+
"scripts": {
11+
"dev": "vite",
12+
"build": "vite build",
13+
"serve": "vite preview"
14+
},
15+
"bugs": {
16+
"url": "https://github.com/aykutkardas/vue-icomoon/issues"
17+
},
18+
"homepage": "https://github.com/aykutkardas/vue-icomoon#readme",
19+
"main": "./dist/vue-icomoon.umd.js",
20+
"module": "./dist/vue-icomoon.es.js",
21+
"exports": {
22+
".": {
23+
"require": "./dist/vue-icomoon.umd.js",
24+
"import": "./dist/vue-icomoon.es.js"
25+
}
26+
},
27+
"repository": {
28+
"type": "git",
29+
"url": "https://github.com/aykutkardas/vue-icomoon.git"
30+
},
31+
"keywords": [
32+
"Vue",
33+
"Vue3",
34+
"IcoMoon",
35+
"SVG",
36+
"Icon"
37+
],
38+
"peerDependencies": {
39+
"vue": "3.2.20"
40+
},
41+
"devDependencies": {
42+
"@vitejs/plugin-vue": "^1.9.3",
43+
"vite": "^2.6.4"
44+
}
45+
}

‎src/App.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
<template>
3+
<icon icon="camera" :size="60" />
4+
<icon icon="document" color="red" />
5+
<icon icon="camera" />
6+
</template>
7+
8+
<script>
9+
import Icon from "./components/Icon/Icon.vue";
10+
11+
export default {
12+
name: "App",
13+
components: {
14+
Icon
15+
},
16+
};
17+
</script>

‎src/components/Icomoon.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<svg :viewBox="viewBox" :style="style" v-bind="svgProps">
3+
<path v-for="(path, index) in paths" :d="path.d" />
4+
</svg>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "Icomoon",
10+
props: {
11+
iconSet: {
12+
type: Object,
13+
required: true,
14+
},
15+
icon: {
16+
type: String,
17+
required: true,
18+
},
19+
color: {
20+
type: String,
21+
default: "",
22+
},
23+
size: {
24+
type: Number,
25+
default: 16,
26+
},
27+
disableFill: {
28+
type: Boolean,
29+
default: false,
30+
},
31+
removeInitialStyle: {
32+
type: Boolean,
33+
default: false,
34+
},
35+
style: {
36+
type: Object,
37+
default: {}
38+
}
39+
},
40+
setup({
41+
iconSet,
42+
icon,
43+
size,
44+
title,
45+
disableFill,
46+
removeInitialStyle,
47+
...svgProps
48+
}) {
49+
const initialStyle = {
50+
display: "inline-block",
51+
stroke: "currentColor",
52+
fill: "currentColor",
53+
};
54+
55+
const currentIcon = iconSet.icons.find(
56+
(item) => item.properties.name === icon
57+
);
58+
59+
if (!currentIcon) {
60+
return {};
61+
}
62+
63+
const { width = "1024" } = currentIcon.icon;
64+
const viewBox = `0 0 ${width} 1024`;
65+
const style = {
66+
...(removeInitialStyle ? {} : initialStyle),
67+
}
68+
69+
if (size) {
70+
style.width = size;
71+
style.height = size;
72+
}
73+
74+
75+
const paths = currentIcon.icon.paths.map((path, index) => {
76+
const pathProps = {
77+
d: path,
78+
...(!disableFill ? currentIcon.icon.attrs[index] : {}),
79+
};
80+
81+
return pathProps;
82+
});
83+
84+
return {
85+
currentIcon,
86+
viewBox,
87+
style,
88+
paths,
89+
svgProps
90+
};
91+
},
92+
};
93+
</script>

‎src/components/Icon/Icon.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
<template>
3+
<icomoon :iconSet="iconSet" v-bind="props" />
4+
</template>
5+
6+
<script>
7+
import Icomoon from "../Icomoon.vue";
8+
import iconSet from "./selection.json";
9+
10+
export default {
11+
name: "App",
12+
components: {
13+
Icomoon
14+
},
15+
props: {
16+
icon: {
17+
type: String,
18+
required: true
19+
}
20+
},
21+
setup(props) {
22+
return {
23+
props,
24+
iconSet
25+
}
26+
},
27+
};
28+
</script>

0 commit comments

Comments
 (0)