-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
136 lines (131 loc) · 4.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magnet Icon Picker | Sabbir Hossain</title>
<link
rel="shortcut icon"
href="./assects/images/favicon.ico"
type="image/x-icon" />
<link rel="stylesheet" href="./assects/css/magnetIconPicker.css" />
<link rel="stylesheet" href="./assects/fonts/all.css" />
<link rel="stylesheet" href="./assects/css/index.css" />
</head>
<body>
<header>
<h1>Magnet Icon Library</h1>
<p>Easy and customizable icon picker for your projects</p>
<a
class="button btn-margin btn-header"
href="https://github.com/devsabbirhossain/magnet-icon-library"
target="_blank"
>View on Github</a
>
</header>
<section id="features">
<h2>Features</h2>
<div class="feature">
<p>
🎨 **Wide Variety of Icons** - Choose from hundreds of icons, easily
categorized for quick access.
</p>
</div>
<div class="feature">
<p>
⚙️ **Customizable Options** - Change colors, sizes, and styles to
match your brand.
</p>
</div>
<div class="feature">
<p>
🔄 **Live Preview** - See a real-time preview of the selected icon and
its customizations.
</p>
</div>
</section>
<section id="demo">
<h2>Single Icon Demo</h2>
<p class="add-bottom-margin">Choose One Icon Per Page</p>
<div class="mil-icon-picker">
<div id="icon-placeholder" class="icon-placeholder">
<i class="fas fa-circle"></i>
<input type="hidden" name="icon-value" id="icon-value" value="" />
</div>
<div class="tw-flex tw-gap-2 tw-items-center" id="icon-picker-wrap">
<span
id="icon-none"
class="del icon-none tw-text-accent-red-500 hover:tw-text-red-800 hover:tw-underline btn-remove"
>Remove</span
>
<span class="button button-primary bkit-w-100 icon-picker btn-margin">
<span id="select-icon" class="select-icon"> Add Icon </span>
</span>
</div>
</div>
</section>
<section id="demo2">
<h2>Multiple Icon Demo</h2>
<p class="add-bottom-margin">Choose Multiple Icon Per Page</p>
<div class="multiple-icon">
<div class="mil-icon-picker-multiple">
<div id="icon-placeholder-1" class="icon-placeholder">
<i class="fas fa-circle"></i>
<input
type="hidden"
name="icon-value-1"
id="icon-value-1"
value="" />
</div>
<div class="tw-flex tw-gap-2 tw-items-center" id="icon-picker-wrap-1">
<span
id="icon-none-1"
class="del icon-none tw-text-accent-red-500 hover:tw-text-red-800 hover:tw-underline btn-remove"
>Remove</span
>
<span
class="button button-primary bkit-w-100 icon-picker btn-margin">
<span id="select-icon-1" class="select-icon"> Add Icon </span>
</span>
</div>
</div>
<div class="mil-icon-picker-multiple">
<div id="icon-placeholder-2" class="icon-placeholder">
<i class="fas fa-circle"></i>
<input
type="hidden"
name="icon-value-2"
id="icon-value-2"
value="" />
</div>
<div class="tw-flex tw-gap-2 tw-items-center" id="icon-picker-wrap-2">
<span
id="icon-none-2"
class="del icon-none tw-text-accent-red-500 hover:tw-text-red-800 hover:tw-underline btn-remove"
>Remove</span
>
<span
class="button button-primary bkit-w-100 icon-picker btn-margin">
<span id="select-icon-2" class="select-icon-2"> Add Icon </span>
</span>
</div>
</div>
</div>
</section>
<footer>
<p>
© 2024
<a class="btn-url" href="https://devsabbirhossain.com" target="_blank"
>DevSabbirHossain</a
>, All rights reserved. |
<a
href="mailto:[email protected]"
style="color: #fff; text-decoration: none"
>Contact Me</a
>
</p>
</footer>
<script src="./assects/icon-picker/magnet-picker.js"></script>
<script src="./assects/js/index.js"></script>
</body>
</html>