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 +106 -0
- package/fonts/config.json +1243 -0
- package/fonts/css/animation.css +85 -0
- package/fonts/css/inticons-codes.css +89 -0
- package/fonts/css/inticons-embedded.css +147 -0
- package/fonts/css/inticons-ie7-codes.css +89 -0
- package/fonts/css/inticons-ie7.css +100 -0
- package/fonts/css/inticons.css +144 -0
- package/fonts/font/inticons.eot +0 -0
- package/fonts/font/inticons.svg +186 -0
- package/fonts/font/inticons.ttf +0 -0
- package/fonts/font/inticons.woff +0 -0
- package/fonts/font/inticons.woff2 +0 -0
- package/fonts/inticons.bundle.css +439 -0
- package/fonts/inticons.bundle.min.css +1 -0
- package/fonts/scss/_animation.scss +23 -0
- package/fonts/scss/_flip.scss +9 -0
- package/fonts/scss/_font-face.scss +11 -0
- package/fonts/scss/_prefix.scss +34 -0
- package/fonts/scss/_rotate.scss +5 -0
- package/fonts/scss/_size.scss +5 -0
- package/fonts/scss/main.scss +7 -0
- package/package.json +109 -0
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.
|