Skip to content

Commit 1750018

Browse files
philwarehamphilwareham
committed
Make these icons more globally useful
1 parent 799c73a commit 1750018

File tree

2 files changed

+28
-18
lines changed

2 files changed

+28
-18
lines changed

‎src/assets/sass/modules/_icons.scss‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,23 @@
125125
//.ui-icon-transfer-e-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M2 10l3 3v-2h5V9H5V7zM14 6l-3-3v2H6v2h5v2z'/%3E%3C/svg%3E"); }
126126
//.ui-icon-transferthick-e-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M0 11l5 5v-3h4V9H5V6zM16 5l-5-5v3H7v4h4v3z'/%3E%3C/svg%3E"); }
127127

128-
//.ui-icon-folder-collapsed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M14 2h-1V1h-3L9 2H1v12h13V2zM2 3h11v10H2V3z'/%3E%3Cpath d='M2 4h11v1H2z'/%3E%3C/g%3E%3C/svg%3E"); }
129-
//.ui-icon-folder-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 5V2h-1V1H9L8 2H0v12h13.5L16 5h-3zM1 3h11v2H3l-2 7V3zm11.5 10H2l2-7h10.5l-2 7z'/%3E%3C/svg%3E"); }
128+
.ui-icon-folder-collapsed,
129+
.list--tree .directory::before {
130+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M14 2h-1V1h-3L9 2H1v12h13V2zM2 3h11v10H2V3z'/%3E%3Cpath d='M2 4h11v1H2z'/%3E%3C/g%3E%3C/svg%3E");
131+
}
132+
133+
.ui-icon-folder-open,
134+
.list--tree .directory--open::before {
135+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 5V2h-1V1H9L8 2H0v12h13.5L16 5h-3zM1 3h11v2H3l-2 7V3zm11.5 10H2l2-7h10.5l-2 7z'/%3E%3C/svg%3E");
136+
}
137+
130138
//.ui-icon-document { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M13 4v11H3V1h7l3 3zm-3-2H4v12h8V4l-2-2z'/%3E%3Cpath d='M10 4V2H9v3h3V4zM5 12h6v1H5zM5 10h6v1H5zM5 8h6v1H5zM5 6h6v1H5z'/%3E%3C/g%3E%3C/svg%3E"); }
131-
//.ui-icon-document-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='m10 15h-7v-14h10v11zm2-3v-10h-8v12h6z'/%3E%3Cpath d='m10 12v2h-1v-3h3v1z'/%3E%3C/g%3E%3C/svg%3E"); }
139+
140+
.ui-icon-document-b,
141+
.list--tree .document::before {
142+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='m10 15h-7v-14h10v11zm2-3v-10h-8v12h6z'/%3E%3Cpath d='m10 12v2h-1v-3h3v1z'/%3E%3C/g%3E%3C/svg%3E");
143+
}
144+
132145
//.ui-icon-note { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 1v13H3v-1h2v-1H3v-1h2v-1H3V9h2V8H3V7h2V6H3V5h2V4H3V3h2V2H3V1h10zm-2 9H7v1h4v-1zm0-2H7v1h4V8z'/%3E%3C/svg%3E"); }
133146
//.ui-icon-mail-closed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M1 3h14v10H1V3zm7 6c-.875 0-1.25-.5-1.25-.5L3.25 12h9.5l-3.5-3.5S8.875 9 8 9zm-6 3l4-4-4-4v8zm12 0V4l-4 4 4 4zM9.25 7.5l3.5-3.5h-9.5l3.5 3.5S7.562 8 8 8s1.25-.5 1.25-.5z'/%3E%3C/svg%3E"); }
134147
//.ui-icon-mail-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M15 3.5V13H1V3.5S6 0 8 0s7 3.5 7 3.5zM8 9c-.875 0-1.25-.5-1.25-.5L3.25 12h9.5l-3.5-3.5S8.875 9 8 9zM6 8L2 4v8l4-4zm4 0l4 4V4l-4 4zM8 1c-1 0-1.578.375-1.578.375L2 4h12L9.578 1.375S9 1 8 1z'/%3E%3C/svg%3E"); }
@@ -172,7 +185,12 @@
172185
//.ui-icon-clipboard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M13 3v12H3V3h2l1-2h4l1 2h2zm-3 11c2 0 2-1 2-1V5H4v8s0 1 2 1h4zM9 2H7v1h2V2z'/%3E%3Cpath d='M5 7h6v1H5zM5 9h6v1H5zM5 11h6v1H5z'/%3E%3C/g%3E%3C/svg%3E"); }
173186
//.ui-icon-copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M8 11v2h7V3H8v2H7V2h9v12H7v-3zM6 3V2H0v12h6v-1H1V3z'/%3E%3Cpath d='M13 8l-3-3v2H4v2h6v2z'/%3E%3C/g%3E%3C/svg%3E"); }
174187
//.ui-icon-contact { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M9 12v-.399A3.114 3.114 0 0 1 7.5 12C5.566 12 4 10.209 4 8s1.566-4 3.5-4c.539 0 1.044.15 1.5.399V4h2v7h2.177A5.933 5.933 0 0 0 14 8a6 6 0 1 0-6 6 5.961 5.961 0 0 0 3-.81v1.127A6.962 6.962 0 0 1 8 15a7 7 0 1 1 7-7 6.965 6.965 0 0 1-1.26 4H9zm0-5.723A1.987 1.987 0 0 0 8 6a2 2 0 0 0 0 4c.366 0 .705-.106 1-.277V6.277z'/%3E%3C/svg%3E"); }
175-
//.ui-icon-image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M0 14V2h16v12H0zM15 3H1v10h14V3z'/%3E%3Cpath d='M2 12l3-3 1 1 4-4 4 4v2z'/%3E%3Ccircle cx='4' cy='6' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
188+
189+
.ui-icon-image,
190+
.list--tree .image::before {
191+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M0 14V2h16v12H0zM15 3H1v10h14V3z'/%3E%3Cpath d='M2 12l3-3 1 1 4-4 4 4v2z'/%3E%3Ccircle cx='4' cy='6' r='2'/%3E%3C/g%3E%3C/svg%3E");
192+
}
193+
176194
//.ui-icon-video { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='m13 14h-10v-13h10zm-8-12h-1v1h1zm0 2h-1v1h1zm0 2h-1v1h1zm0 2h-1v1h1zm0 2h-1v1h1zm0 2h-1v1h1zm7 0h-1v1h1zm0-2h-1v1h1zm0-2h-1v1h1zm0-2h-1v1h1zm0-2h-1v1h1zm0-2h-1v1h1zm-2 0h-4v5h4zm0 6h-4v5h4z'/%3E%3C/svg%3E"); }
177195
//.ui-icon-script { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M4 2h7c2 0 2 3 1 6-.24.72-.479 1.438-.677 2.116.392.27.677 1.007.677 1.884 0 .842-.261 1.56-.629 1.854L11 14H4c-2 0-1-3 0-6 .269-.805.461-1.606.566-2.353C4.405 5.869 4.211 6 4 6c-.553 0-1-.896-1-2 0-.857.271-1.584.65-1.867L4 2zm6 11s0-2 1-5c1.304-3.911 0-5 0-5H5s1.304 1.089 0 5c-1 3-1 5-1 5h6z'/%3E%3C/svg%3E"); }
178196

‎src/assets/sass/modules/_lists.scss‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -182,10 +182,13 @@ dd {
182182
}
183183
}
184184

185+
// Icons - also see icons Sass module.
186+
185187
.list--tree {
186188
.directory::before,
187189
.directory--open::before,
188-
.document::before {
190+
.document::before,
191+
.image::before {
189192
display: inline-block;
190193
width: 16px;
191194
height: 16px;
@@ -198,18 +201,6 @@ dd {
198201
overflow: hidden;
199202
vertical-align: baseline;
200203
}
201-
202-
.directory::before {
203-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M14 2h-1V1h-3L9 2H1v12h13V2zM2 3h11v10H2V3z'/%3E%3Cpath d='M2 4h11v1H2z'/%3E%3C/g%3E%3C/svg%3E");
204-
}
205-
206-
.directory--open::before {
207-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 5V2h-1V1H9L8 2H0v12h13.5L16 5h-3zM1 3h11v2H3l-2 7V3zm11.5 10H2l2-7h10.5l-2 7z'/%3E%3C/svg%3E");
208-
}
209-
210-
.document::before {
211-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='m10 15h-7v-14h10v11zm2-3v-10h-8v12h6z'/%3E%3Cpath d='m10 12v2h-1v-3h3v1z'/%3E%3C/g%3E%3C/svg%3E");
212-
}
213204
}
214205

215206
@include dark-mode {
@@ -225,7 +216,8 @@ dd {
225216

226217
.directory::before,
227218
.directory--open::before,
228-
.document::before {
219+
.document::before,
220+
.image::before {
229221
filter: brightness(3) sepia(1) hue-rotate(168deg) saturate(33%);
230222
}
231223
}

0 commit comments

Comments
 (0)