-
Notifications
You must be signed in to change notification settings - Fork 4
/
Icon.haml
80 lines (75 loc) · 2.61 KB
/
Icon.haml
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
:ruby
ICONS = {
"arrows-rotate" => svg("./arrows-rotate-solid.svg"),
"bars" => svg("./bars-solid.svg"),
"cloud-arrow-down" => svg("./cloud-arrow-down-solid.svg"),
"code" => svg("./code-solid.svg"),
"code-compare" => svg("./code-compare-solid.svg"),
"code-pull-request" => svg("./code-pull-request-solid.svg"),
"dice" => svg("./dice-solid.svg"),
"file-code" => svg("./file-code-solid.svg"),
"file-image" => svg("./file-image-solid.svg"),
"file-lines" => svg("./file-lines-solid.svg"),
"file" => svg("./file-solid.svg"),
"filter" => svg("./filter-solid.svg"),
"fire" => svg("./fire-solid.svg"),
"flask" => svg("./flask-solid.svg"),
"folder-open" => svg("./folder-open-solid.svg"),
"folder" => svg("./folder-solid.svg"),
"forward-step" => svg("./forward-step-solid.svg"),
"gauge-high" => svg("./gauge-high-solid.svg"),
"gauge" => svg("./gauge-solid.svg"),
"gem" => svg("./gem-solid.svg"),
"github" => svg("./github.svg"),
"globe" => svg("./globe-solid.svg"),
"heart" => svg("./heart-solid.svg"),
"html5" => svg("./html5.svg"),
"keyboard" => svg("./keyboard-solid.svg"),
"language" => svg("./language-solid.svg"),
"laptop-code" => svg("./laptop-code-solid.svg"),
"link" => svg("./link-solid.svg"),
"minus" => svg("./minus-solid.svg"),
"network-wired" => svg("./network-wired-solid.svg"),
"pause" => svg("./pause-solid.svg"),
"person-digging" => svg("./person-digging-solid.svg"),
"play" => svg("./play-solid.svg"),
"plus" => svg("./plus-solid.svg"),
"question" => svg("./question-solid.svg"),
"rocket" => svg("./rocket-solid.svg"),
"seedling" => svg("./seedling-solid.svg"),
"server" => svg("./server-solid.svg"),
"square-github" => svg("./square-github.svg"),
"star" => svg("./star-solid.svg"),
"up-right-from-square" => svg("./up-right-from-square-solid.svg"),
"wand-magic-sparkles" => svg("./wand-magic-sparkles-solid.svg"),
"xmark" => svg("./xmark-solid.svg"),
}.freeze
:ruby
url = ICONS[$name] or return
aria = $title ? {} : { hidden: "true" }
style = {
**($style || {}),
__icon: "url(#{url})",
__icon_color: $color
}.reject { _2.nil? }
%i{
class: $class,
title: $title,
style:,
aria:,
}
:css
i {
display: inline-block;
width: 1em;
aspect-ratio: 1;
background: var(--icon-color, currentcolor);
-webkit-mask-image: var(--icon);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: 50% 50%;
mask-image: var(--icon);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
}