Skip to content

Commit a2fb91d

Browse files
smnandresmnandre
committed
Search / icon
1 parent 2f83dcc commit a2fb91d

File tree

4 files changed

+272
-36
lines changed

4 files changed

+272
-36
lines changed

‎ux.symfony.com/assets/styles/components/_Icons.scss‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.Icons {
2+
--min: 5rem;
23
display: grid;
3-
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
4-
gap: 1rem;
4+
grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
5+
gap: 1.5rem;
56
justify-content: center;
67
align-items: center;
78
}
@@ -11,30 +12,40 @@
1112
place-items: center;
1213
border-radius: 0.75rem;
1314
border: 1px solid var(--bs-secondary-bg-subtle);
15+
background: rgb(255 255 255 / 50%);
1416
padding: 0.5rem;
1517
justify-content: center;
1618
align-items: center;
1719
aspect-ratio: 1;
1820
position: relative;
1921
transition: 150ms linear;
20-
a::after {
22+
}
23+
.Icons-icon:hover {
24+
transition: 250ms ease-in-out;
25+
transform: scale(1.2);
26+
border-width: 2px;
27+
}
28+
.Icons-icon a::after {
2129
position: absolute;
2230
top: 0;
2331
right: 0;
2432
bottom: 0;
2533
left: 0;
2634
z-index: 1;
2735
content: "";
28-
}
29-
svg {
36+
}
3037

38+
39+
40+
[data-bs-theme="dark"] {
41+
.Icons-icon {
42+
background: rgb(0 0 0 / 50%);
43+
}
44+
.Icons-icon img {
45+
filter: invert(1) hue-rotate(180deg);
3146
}
3247
}
33-
.Icons-icon:hover {
34-
fill: #f4645f;
35-
transition: 250ms ease-in-out;
36-
transform: scale(1.2);
37-
}
48+
3849

3950
.IconSetCard {
4051
display: grid;

‎ux.symfony.com/src/Twig/SearchIcons.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ public function icons(): array
4343
}
4444

4545
if (!$this->query && $this->set) {
46-
$icons = array_slice($this->iconify->collectionIcons($this->set), 0, 128);
46+
$icons = array_slice($this->iconify->collectionIcons($this->set), 0, 256);
4747

4848
$result = [];
4949
foreach ($icons as $icon) {
@@ -53,7 +53,7 @@ public function icons(): array
5353
return $result;
5454
}
5555

56-
$icons = $this->iconify->search($this->query, $this->set, 128)['icons'];
56+
$icons = $this->iconify->search($this->query, $this->set, 256)['icons'];
5757

5858
return array_map(
5959
fn (string $icon) => sprintf('https://api.iconify.design/%s.svg', str_replace(':', '/', $icon)),

‎ux.symfony.com/templates/components/SearchIcons.html.twig‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div{{ attributes }}>
22

3-
<div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow mt-5 row" style="border-radius: .75rem">
4-
<fieldset class="d-flex">
3+
<div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow mt-5" style="border-radius: .75rem">
4+
<fieldset class="d-flex d-flex gap-4">
55
{% if not hideSelect %}
66
<select
77
class="form-control w-25"
@@ -24,13 +24,42 @@
2424
{% endfor %}
2525
</select>
2626
{% endif %}
27-
<input
28-
autofocus
29-
type="search"
30-
data-model="query"
31-
placeholder="Results update as you type..."
32-
class="form-control ms-3"
33-
>
27+
28+
<div class="input-group">
29+
<span class="input-group-text" id="basic-addon1">
30+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
31+
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
32+
</svg>
33+
</span>
34+
<input
35+
autofocus
36+
type="search"
37+
data-model="query"
38+
placeholder="Results update as you type..."
39+
class="form-control"
40+
>
41+
</div>
42+
43+
<div class="d-flex">
44+
<button class="btn">
45+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 8 8"><path fill="currentColor" d="M0 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zM0 2v1h1V2zm2 0v1h1V2zm2 0v1h1V2zm2 0v1h1V2zM0 4v1h1V4zm2 0v1h1V4zm2 0v1h1V4zm2 0v1h1V4zM0 6v1h1V6zm2 0v1h1V6zm2 0v1h1V6zm2 0v1h1V6z"></path></svg>
46+
</button>
47+
<button class="btn">
48+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 8 8"><path fill="currentColor" d="M0 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zM0 2v1h1V2zm2 0v1h1V2zm2 0v1h1V2zm2 0v1h1V2zM0 4v1h1V4zm2 0v1h1V4zm2 0v1h1V4zm2 0v1h1V4zM0 6v1h1V6zm2 0v1h1V6zm2 0v1h1V6zm2 0v1h1V6z"></path></svg>
49+
</button>
50+
<button class="btn">
51+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 8 8"><path fill="currentColor" d="M0 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zm2 0v1h1V0zM0 2v1h1V2zm2 0v1h1V2zm2 0v1h1V2zm2 0v1h1V2zM0 4v1h1V4zm2 0v1h1V4zm2 0v1h1V4zm2 0v1h1V4zM0 6v1h1V6zm2 0v1h1V6zm2 0v1h1V6zm2 0v1h1V6z"></path></svg>
52+
</button>
53+
</div>
54+
55+
<div>
56+
<button class="btn">
57+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
58+
<path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139q.323-.119.684-.12h5.396z"/>
59+
</svg>
60+
</button>
61+
</div>
62+
3463
</fieldset>
3564
</div>
3665

‎ux.symfony.com/templates/icons/icon.html.twig‎

Lines changed: 211 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,232 @@
1414
<a href="{{ path('app_icons') }}">UX Icons</a> /
1515
<a href="{{ path('app_icon_collection', {prefix: prefix}) }}">{{ collection.name }}</a>
1616
</p>
17-
<h1 class="text-center ubuntu mt-2">Icon <code>{{ fullName }}</code></h1>
17+
<h1 class="text-center ubuntu mt-2"><code style="--bs-code-color: var(--color)">{{ prefix }}:</code><code>{{ name }}</code></h1>
18+
<div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center">
19+
<p>
20+
{% if collection.total|default %}
21+
<span>
22+
<span>Icon Set</span>
23+
<code>
24+
{{ collection.name }}
25+
</code>
26+
</span>
27+
{% endif %}
28+
{% if collection.total|default %}
29+
<span>
30+
<span>Icons</span>
31+
<code>
32+
{{ collection.total }}
33+
</code>
34+
</span>
35+
{% endif %}
36+
{% if categories|default %}
37+
<span>
38+
<span>Categories</span>
39+
<code>
40+
{{ categories|length }}
41+
</code>
42+
</span>
43+
{% endif %}
44+
{% if collection.license.url|default %}
45+
<span>
46+
<span>License</span>
47+
<code>
48+
<a href="{{ collection.license.url }}" rel="external nofollow">
49+
{{ collection.license.title }}
50+
</a>
51+
</code>
52+
</span>
53+
{% endif %}
54+
</p>
55+
</div>
1856
</div>
1957
</div>
2058

21-
<div>
2259

23-
</div>
60+
<style>
61+
.icon-preview {
62+
width: auto;
63+
height: auto;
64+
aspect-ratio: 1;
65+
display: grid;
66+
place-items: center;
67+
background-color: var(--bs-secondary-bg-subtle);
68+
}
69+
.bg-1 {
70+
background-image: repeating-linear-gradient(45deg, rgb(0, 0, 0) 25%, transparent 25%, transparent 75%, rgb(0, 0, 0) 75%, rgb(0, 0, 0)), repeating-linear-gradient(45deg, rgb(68, 76, 247) 25%, rgb(229, 229, 247) 25%, rgb(229, 229, 247) 75%, rgb(68, 76, 247) 75%, rgb(68, 76, 247));
71+
background-size: 60px 60px;
72+
background-position: 0px 0px, 30px 30px;
73+
}
74+
.bg-2 {
75+
background-color: rgb(229, 229, 247);
76+
opacity: 0.8;
77+
background-image: linear-gradient(rgb(68, 76, 54) 3px, transparent 3px), linear-gradient(to right, rgb(68, 76, 247) 3px, rgb(229, 229, 247) 3px);
78+
background-size: 60px 60px;
79+
}
80+
.bg-3 {
81+
background-color: grey;
82+
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
83+
background-size: 50px 50px;
84+
background-position: 0 0, 25px 25px;
85+
}
86+
.bg-4 {
87+
background-image: radial-gradient(currentColor 2px, transparent 2px);
88+
background-size: calc(9 * 2px) calc(9 * 2px);
89+
}
90+
.bg-5 {
91+
background-color: rgb(229, 229, 247);
92+
opacity: 0.8;
93+
background-image: linear-gradient(rgb(68, 76, 64) 3px, transparent 3px), linear-gradient(to right, rgb(68, 76, 65) 3px, rgb(229, 229, 247) 3px);
94+
background-size: 60px 60px;
95+
}
96+
.bg-6 {
97+
background-image: linear-gradient(#727272 1.1px,transparent 1.1px),linear-gradient(to right,#444444 1.1px,#fffbdd 1.1px);
98+
background-size: 22px 22px;
99+
}
100+
.bg-7 {
101+
background: #fff;
102+
}
103+
.bg-8 {
104+
background: #000;
105+
}
106+
.icon-preview svg {
107+
width: 80%;
108+
height: 80%;
109+
}
110+
</style>
111+
24112

25113
<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
26-
{{ svg|raw }}
27114

28-
{{ dump(collection) }}
29-
</div>
115+
116+
<div class="row">
117+
118+
<div class="col-4">
119+
<div class="icon-preview bg-1" style="">
120+
{{ svg|raw }}
121+
</div>
122+
</div>
123+
124+
<div class="col-8">
125+
126+
<div style="display:grid; grid-template-columns: repeat(8, 1fr);">
127+
<div class="icon-preview bg-2" style="">
128+
{{ svg|raw }}
129+
</div>
130+
<div class="icon-preview bg-2" style="">
131+
{{ svg|raw }}
132+
</div>
133+
<div class="icon-preview bg-2" style="">
134+
{{ svg|raw }}
135+
</div>
136+
<div class="icon-preview bg-2" style="">
137+
{{ svg|raw }}
138+
</div>
139+
<div class="icon-preview bg-2" style="">
140+
{{ svg|raw }}
141+
</div>
142+
<div class="icon-preview bg-2" style="">
143+
{{ svg|raw }}
144+
</div>
145+
<div class="icon-preview bg-2" style="">
146+
{{ svg|raw }}
147+
</div>
148+
</div>
149+
150+
<div>
151+
<pre>
152+
<code>{{ ('<' ~ 'twig:UX:Icon name="' ~ fullName ~ '" />')|e }}</code>
153+
</pre>
154+
</div>
155+
156+
<div>
157+
<pre>
158+
<code>{{ ('{{ ux_icon' ~ '("' ~ fullName ~ '") }}')|e }}</code>
159+
</pre>
160+
</div>
161+
162+
<div class="d-flex justify-content-center ">
163+
<twig:TerminalCommand command="symfony console ux:icons:import {{ fullName }}" />
164+
</div>
165+
166+
</div>
167+
168+
</div>
169+
170+
<div class="col-4">
171+
<div class="d-grid">
172+
<div>
173+
<div class="icon-preview bg-2" style="">
174+
{{ svg|raw }}
175+
</div>
176+
<div class="icon-preview bg-3" style="">
177+
{{ svg|raw }}
178+
</div>
179+
<div class="icon-preview bg-2" style="">
180+
{{ svg|raw }}
181+
</div>
182+
<div class="icon-preview bg-3" style="">
183+
{{ svg|raw }}
184+
</div>
185+
</div>
186+
<div>
187+
<div class="icon-preview bg-4" style="width: 25%;">
188+
{{ svg|raw }}
189+
</div>
190+
<div class="icon-preview bg-5" style="width: 25%;">
191+
{{ svg|raw }}
192+
</div>
193+
<div class="icon-preview bg-6" style="width: 25%;">
194+
{{ svg|raw }}
195+
</div>
196+
<div class="icon-preview bg-7" style="width: 25%;">
197+
{{ svg|raw }}
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
203+
<div class="col-4">
204+
205+
206+
<div class="d-flex justify-content-center ">
207+
208+
</div>
209+
</div>
210+
</div>
211+
212+
<div style="display: grid;">
213+
214+
215+
216+
217+
218+
219+
220+
30221

31222

32-
<div class="d-flex justify-content-center ">
33-
<twig:TerminalCommand command="symfony console ux:icons:import {{ fullName }}" />
34223
</div>
35224

225+
226+
</div>
227+
228+
{% set svg %}
229+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-moon" viewBox="0 0 16 16">
230+
<path d="M7 8a3.5 3.5 0 0 1 3.5 3.555.5.5 0 0 0 .625.492A1.503 1.503 0 0 1 13 13.5a1.5 1.5 0 0 1-1.5 1.5H3a2 2 0 1 1 .1-3.998.5.5 0 0 0 .509-.375A3.5 3.5 0 0 1 7 8m4.473 3a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 16h8.5a2.5 2.5 0 0 0 0-5z"/>
231+
<path d="M11.286 1.778a.5.5 0 0 0-.565-.755 4.595 4.595 0 0 0-3.18 5.003 5.5 5.5 0 0 1 1.055.209A3.6 3.6 0 0 1 9.83 2.617a4.593 4.593 0 0 0 4.31 5.744 3.58 3.58 0 0 1-2.241.634q.244.477.394 1a4.59 4.59 0 0 0 3.624-2.04.5.5 0 0 0-.565-.755 3.593 3.593 0 0 1-4.065-5.422z"/>
232+
</svg>
233+
{% endset %}
234+
36235
<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
37-
<h2>Icon details</h2>
38-
<p>Prefix: <code>{{ prefix }}</code></p>
39-
<p>Name: <code>{{ name }}</code></p>
40-
<p>Full name: <code>{{ fullName }}</code></p>
41-
<p>Collection: <code>{{ collection.name }}</code></p>
42-
<p>Category: <code>{{ category|default }}</code></p>
43-
<p>Tags: <code>{{ tags|default([])|join(', ') }}</code></p>
236+
{{ svg|raw }}
237+
238+
{{ dump(collection) }}
44239
</div>
45240

46241

242+
47243
<div>
48244

49245

0 commit comments

Comments
 (0)