Skip to content

Commit 835b48a

Browse files
smnandresmnandre
committed
Icon
1 parent a2fb91d commit 835b48a

File tree

2 files changed

+63
-104
lines changed

2 files changed

+63
-104
lines changed

‎ux.symfony.com/src/Controller/IconsController.php‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,17 @@ final class IconsController extends AbstractController
1818
public function index(IconSetRepository $iconSetRepository): Response
1919
{
2020

21-
$iconSets = array_slice($iconSetRepository->findAll(), 0, 12);
21+
$favorites = [
22+
'ri',
23+
'tabler',
24+
'bi',
25+
'lucide',
26+
'iconoir',
27+
'bx',
28+
'octoicons',
29+
];
30+
$iconSets = array_slice($iconSetRepository->findAll(), 0, 24);
31+
$iconSets = array_filter($iconSets, fn(IconSet $iconSet) => in_array($iconSet->getIdentifier(), $favorites));
2232

2333
return $this->render('icons/index.html.twig', [
2434
'iconSets' => $iconSets,

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

Lines changed: 52 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -64,44 +64,32 @@
6464
aspect-ratio: 1;
6565
display: grid;
6666
place-items: center;
67-
background-color: var(--bs-secondary-bg-subtle);
67+
background-color: var(--bs-secondary-bg-subtle);
68+
border-radius: .75rem;
69+
border: 1px solid var(--bs-secondary-bg-subtle);
70+
6871
}
6972
.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+
background-image: linear-gradient(currentColor 1px, transparent 1px),linear-gradient(to right, currentColor 1px, transparent 1px);
74+
background-size: 34px 34px;
75+
background-blend-mode: overlay;
76+
background-position: center center;
7377
}
7478
.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+
background: #fff;
7980
}
8081
.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;
82+
--color-text: rgba(255 255 255 / 25%);
83+
background-image: repeating-linear-gradient(45deg, var(--color-text) 25%, transparent 25%, transparent 75%, var(--color-text) 75%, var(--color-text)),
84+
repeating-linear-gradient(45deg, var(--color-text) 25%, transparent 25%, transparent 75%, var(--color-text) 75%, var(--color-text));
85+
background-position: 0 0,20px 20px;
86+
background-size: calc(2 * 20px) calc(2 * 20px);
8587
}
8688
.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;
89+
background: #000;
9990
}
100-
.bg-7 {
101-
background: #fff;
102-
}
103-
.bg-8 {
104-
background: #000;
91+
.bg-x {
92+
background: rgba(0 0 0 / .5);
10593
}
10694
.icon-preview svg {
10795
width: 80%;
@@ -115,9 +103,36 @@ background-image: linear-gradient(#727272 1.1px,transparent 1.1px),linear-gradie
115103

116104
<div class="row">
117105

118-
<div class="col-4">
119-
<div class="icon-preview bg-1" style="">
120-
{{ svg|raw }}
106+
<div class="col-4" style="display:grid;gap: 1rem;">
107+
<div>
108+
<div class="icon-preview bg-1" style="">
109+
{{ svg|raw }}
110+
</div>
111+
</div>
112+
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;gap: 1rem;">
113+
<div class="icon-preview bg-2" style="">
114+
{{ svg|raw }}
115+
</div>
116+
<div class="icon-preview bg-3" style="">
117+
{{ svg|raw }}
118+
</div>
119+
<div class="icon-preview bg-4" style="">
120+
{{ svg|raw }}
121+
</div>
122+
</div>
123+
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem;">
124+
<div class="icon-preview bg-x" style="color: indianred;">
125+
{{ svg|raw }}
126+
</div>
127+
<div class="icon-preview bg-x" style="color: #3b82f6;">
128+
{{ svg|raw }}
129+
</div>
130+
<div class="icon-preview bg-x" style="color: mediumseagreen;">
131+
{{ svg|raw }}
132+
</div>
133+
<div class="icon-preview bg-x" style="color: lightcoral">
134+
{{ svg|raw }}
135+
</div>
121136
</div>
122137
</div>
123138

@@ -163,89 +178,23 @@ background-image: linear-gradient(#727272 1.1px,transparent 1.1px),linear-gradie
163178
<twig:TerminalCommand command="symfony console ux:icons:import {{ fullName }}" />
164179
</div>
165180

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-
218181

219182

220-
221-
222-
223-
</div>
224-
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-
235-
<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
183+
<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
236184
{{ svg|raw }}
237-
238185
{{ dump(collection) }}
239186
</div>
240187

241188

189+
</div>
242190

243-
<div>
244-
191+
</div>
245192

193+
</div>
246194
</div>
247195

248196

197+
249198
{% endblock %}
250199

251200
{% block aside %}

0 commit comments

Comments
 (0)