Skip to content

Commit b89bce5

Browse files
matowdevmatowdev
committed
[LES-2.6/st-compl] svg-sprite
Working with SVG, creating "sprite" files.. "symbol/use" tags. Worth noting: - the moment of editing an existing SVG file (Reopen Editor With..). core: B-4 / WL-AL
1 parent a8f7f22 commit b89bce5

File tree

3 files changed

+81
-0
lines changed

3 files changed

+81
-0
lines changed

‎core-courses/4-web-layout-advanced-level/2-svg/2-6-svg-sprite/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>SVG-sprite</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
11+
<body class="page">
12+
<h1 class="page__title">Демонстрация иконок из SVG-спрайта</h1>
13+
14+
<p class="page__description">
15+
<svg class="page__icon">
16+
<use href="./sprite.svg#icon-home"></use>
17+
</svg>
18+
Это главная страница.
19+
</p>
20+
21+
<p class="page__description">
22+
<a class="page__link settings-link" href="#">
23+
<svg class="page__icon">
24+
<use href="./sprite.svg#icon-settings"></use>
25+
</svg>
26+
Перейти в настройки
27+
</a>
28+
</p>
29+
30+
<p class="page__description">
31+
А это другая иконка, с особым стилем:
32+
<svg class="page__icon icon-camera-special">
33+
<use href="./sprite.svg#icon-camera"></use>
34+
</svg>
35+
</p>
36+
</body>
37+
38+
</html>

‎core-courses/4-web-layout-advanced-level/2-svg/2-6-svg-sprite/sprite.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎core-courses/4-web-layout-advanced-level/2-svg/2-6-svg-sprite/style.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.page {
2+
font-family: sans-serif;
3+
padding: 2rem;
4+
color: #333;
5+
}
6+
7+
.page__icon {
8+
margin-right: 8px;
9+
width: 32px;
10+
height: 32px;
11+
fill: currentColor;
12+
vertical-align: middle;
13+
}
14+
15+
.icon-camera-special {
16+
width: 48px;
17+
height: 48px;
18+
color: #d94b4b;
19+
}
20+
21+
.settings-link {
22+
font-size: 1.2rem;
23+
text-decoration: none;
24+
color: #007bff;
25+
}
26+
27+
.settings-link:hover {
28+
text-decoration: underline;
29+
}

0 commit comments

Comments
 (0)