inticons 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,106 @@
1
+ <p align="center">
2
+ <a href="https://github.com/medistream-team/inticons" target="_blank">
3
+ <img alt="inticons" src="https://user-images.githubusercontent.com/73154157/173287685-f48b2a71-de64-458f-80a1-573424da2a14.svg" width="150" />
4
+ </a>
5
+ </p>
6
+ <p align="center">
7
+ <img alt="Version" src="https://img.shields.io/npm/v/inticons?color=blue" />
8
+ <a href="#" target="_blank">
9
+ <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
10
+ </a>
11
+ </p>
12
+
13
+ ## Install
14
+
15
+ ```sh
16
+ npm install inticons
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ### Import
22
+
23
+ #### CSS
24
+
25
+ ```css
26
+ @import url('inticons/fonts/inticons.bundle.min.css');
27
+ ```
28
+
29
+ #### Vue
30
+
31
+ ```html
32
+ <script>
33
+ import 'inticons/fonts/inticons.bundle.min.css';
34
+
35
+ export default {
36
+ // ...
37
+ };
38
+ </script>
39
+ ```
40
+
41
+ ### Component
42
+
43
+ Each icon can be referenced by their name prefixed with `ii-`. For example, You can get the arrow-right icon with using `ii-arrow-right`. You can use `font-size` and `color` properties to change the icon appearance.
44
+
45
+ ```html
46
+ <i class="ii ii-arrow-right"></i>
47
+ ```
48
+
49
+ ### Helper Classes
50
+
51
+ Inticons contains many helper classes to quickly modify the look of the icons.
52
+
53
+ #### Rotate
54
+
55
+ - `ii-rotate-45`: Rotate icon 45 Degrees.
56
+ - `ii-rotate-90`: Rotate icon 90 Degrees.
57
+ - `ii-rotate-135`: Rotate icon 135 Degrees.
58
+ - `ii-rotate-180`: Rotate icon 180 Degrees.
59
+ - `ii-rotate-225`: Rotate icon 225 Degrees.
60
+ - `ii-rotate-270`: Rotate icon 270 Degrees.
61
+ - `ii-rotate-315`: Rotate icon 315 Degrees.
62
+
63
+ ```html
64
+ <i class="ii ii-arrow-right ii-rotate-45"></i>
65
+ ```
66
+
67
+ #### Flip
68
+
69
+ - `ii-flip-h`: Flip icon horizontal.
70
+ - `ii-flip-v`: Flip icon vertical.
71
+
72
+ ```html
73
+ <i class="ii ii-arrow-right ii-flip-h"></i>
74
+ ```
75
+
76
+ > `ii-rotate-*` and `ii-flip-*` classes cannot be used on the same element at the same time.
77
+
78
+ #### Size
79
+
80
+ - `ii-2x`: Doubles the size.
81
+ - `ii-3x`: Triples the size.
82
+ - `ii-4x`: Quadraples the size.
83
+
84
+ ```html
85
+ <i class="ii ii-arrow-right ii-4x"></i>
86
+ ```
87
+
88
+ #### Spin
89
+
90
+ - `ii-spin`: Spinning icon.
91
+
92
+ ```html
93
+ <i class="ii ii-arrow-right ii-spin"></i>
94
+ ```
95
+
96
+ ## Contributor
97
+
98
+ ### 👥 [**INTEGRATION Corp.**](https://github.com/medistream-team)
99
+
100
+ - [garudanish](https://github.com/garudanish)
101
+ - [HyungwonJang0327](https://github.com/HyungwonJang0327)
102
+
103
+ ## 📝 License
104
+
105
+ Copyright © 2022 [INTEGRATION Corp.](https://github.com/medistream-team)<br />
106
+ This project is [MIT](https://github.com/medistream-team/inticon/blob/master/LICENSE) licensed.