Skip to content

Commit fbd8f69

Browse files
kimanhoukimanhou
committed
feat(icons): Add storage volume, storage pool and storage bucket icons
Signed-off-by: Kim Anh Nguyen <4783194+kimanhou@users.noreply.github.com>
1 parent e47209c commit fbd8f69

File tree

7 files changed

+86
-5
lines changed

7 files changed

+86
-5
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vanilla-framework",
3-
"version": "4.42.0",
3+
"version": "4.43.0",
44
"author": {
55
"email": "webteam@canonical.com",
66
"name": "Canonical Webteam"

‎releases.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
- version: 4.43.0
2+
features:
3+
- component: Icon
4+
url: /docs/patterns/icons
5+
status: New
6+
notes: Added icons for storage pool, storage volume, and storage bucket.
17
- version: 4.42.0
28
features:
39
- component: Resources

‎scss/_base_icon-definitions.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1600,3 +1600,39 @@
16001600
@mixin vf-icon-stop-themed {
16011601
@include vf-themed-icon($light-value: vf-icon-stop-url($colors--light-theme--icon), $dark-value: vf-icon-stop-url($colors--dark-theme--icon));
16021602
}
1603+
1604+
@function vf-icon-storage-bucket-url($color) {
1605+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M14 6.75h-.83l-.925 8.333a.75.75 0 0 1-.745.667h-7a.75.75 0 0 1-.745-.667L2.829 6.75H2v-1.5h12zm-8.83 7.5h5.66l.832-7.5H4.338z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8.5.25A3.75 3.75 0 0 1 12.25 4h-1.5A2.25 2.25 0 0 0 8.5 1.75h-1A2.25 2.25 0 0 0 5.25 4h-1.5A3.75 3.75 0 0 1 7.5.25z'/%3E%3C/svg%3E");
1606+
}
1607+
1608+
@mixin vf-icon-storage-bucket($color: $colors--light-theme--icon) {
1609+
background-image: vf-icon-storage-bucket-url($color);
1610+
}
1611+
1612+
@mixin vf-icon-storage-bucket-themed {
1613+
@include vf-themed-icon($light-value: vf-icon-storage-bucket-url($colors--light-theme--icon), $dark-value: vf-icon-storage-bucket-url($colors--dark-theme--icon));
1614+
}
1615+
1616+
@function vf-icon-storage-pool-url($color) {
1617+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M8 1a12 12 0 0 1 1.052.044l.21.021.1.01q.11.013.219.029l.129.016.187.03a11 11 0 0 1 .494.09l.06.012a10 10 0 0 1 .519.125q.098.026.193.055l.08.023q.1.03.197.062l.114.037a9 9 0 0 1 .44.162l.105.042a8 8 0 0 1 .431.193l.059.03q.087.042.173.087l.097.054.128.071.113.068.11.07q.053.033.104.067.064.043.124.085l.03.02q.087.062.17.126l.02.017c.616.482 1.046 1.046 1.234 1.659l.016.053q.02.069.034.138.008.028.013.056.018.09.028.181H15v6.534h-.017C14.743 13.35 11.71 15 8 15c-3.71 0-6.743-1.649-6.983-3.733H1V4.733h.017q.01-.09.027-.181l.013-.056q.014-.069.034-.138l.016-.053c.188-.613.619-1.177 1.235-1.66l.02-.016q.083-.064.17-.125l.029-.02q.06-.044.124-.086l.103-.068.111-.07.113-.067.128-.07.097-.055a7 7 0 0 1 .663-.31l.105-.042a9 9 0 0 1 .44-.162l.114-.037q.097-.032.197-.062l.08-.023q.096-.029.193-.055a10 10 0 0 1 .52-.125l.06-.013a11 11 0 0 1 .493-.09l.187-.029.129-.016.219-.029.1-.01.21-.021A12 12 0 0 1 8 1m5.322 9.73C11.922 11.53 10.04 12 8 12s-3.923-.47-5.322-1.27q-.09-.053-.178-.108v.413l.007.06c.04.347.367.938 1.41 1.499 1 .537 2.435.906 4.083.906s3.083-.369 4.083-.906c1.043-.56 1.37-1.152 1.41-1.5l.007-.059v-.413q-.087.055-.178.107m.178-3.258C12.218 8.402 10.232 9 8 9s-4.218-.599-5.5-1.528v1.28c.244.234.55.462.922.675C4.556 10.075 6.173 10.5 8 10.5s3.444-.425 4.578-1.073q.558-.321.922-.675zM8 2.5q-.485 0-.943.041c-1.24.11-2.315.427-3.117.853l-.07.039c-.988.543-1.312 1.11-1.36 1.455A1 1 0 0 0 2.5 5c0 .334.251.93 1.295 1.526C4.796 7.1 6.28 7.5 8 7.5s3.204-.401 4.205-.974C13.25 5.93 13.5 5.334 13.5 5a1 1 0 0 0-.01-.112c-.049-.345-.372-.912-1.36-1.455l-.071-.04c-.802-.425-1.878-.743-3.117-.852Q8.485 2.501 8 2.5' clip-rule='evenodd'/%3E%3C/svg%3E");
1618+
}
1619+
1620+
@mixin vf-icon-storage-pool($color: $colors--light-theme--icon) {
1621+
background-image: vf-icon-storage-pool-url($color);
1622+
}
1623+
1624+
@mixin vf-icon-storage-pool-themed {
1625+
@include vf-themed-icon($light-value: vf-icon-storage-pool-url($colors--light-theme--icon), $dark-value: vf-icon-storage-pool-url($colors--dark-theme--icon));
1626+
}
1627+
1628+
@function vf-icon-storage-volume-url($color) {
1629+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M8 1a12 12 0 0 1 1.052.044l.21.021.1.01q.11.013.219.029l.129.016.187.03a11 11 0 0 1 .494.09l.06.012a10 10 0 0 1 .519.125q.098.026.193.055l.08.023q.1.03.197.062l.114.037a9 9 0 0 1 .44.162l.105.042a8 8 0 0 1 .431.193l.059.03q.087.042.173.087l.097.054.128.071.113.068.11.07q.053.033.104.067.064.043.124.085l.03.02q.087.062.17.126l.02.017c.616.482 1.046 1.046 1.234 1.659l.016.053q.02.069.034.138.008.028.013.056.018.09.028.181H15v6.534h-.017C14.743 13.35 11.71 15 8 15c-3.71 0-6.743-1.649-6.983-3.733H1V4.733h.017q.01-.09.027-.181l.013-.056q.014-.069.034-.138l.016-.053c.188-.613.619-1.177 1.235-1.66l.02-.016q.083-.064.17-.125l.029-.02q.06-.044.124-.086l.103-.068.111-.07.113-.067.128-.07.097-.055a7 7 0 0 1 .663-.31l.105-.042a9 9 0 0 1 .44-.162l.114-.037q.097-.032.197-.062l.08-.023q.096-.029.193-.055a10 10 0 0 1 .52-.125l.06-.013a11 11 0 0 1 .493-.09l.187-.029.129-.016.219-.029.1-.01.21-.021A12 12 0 0 1 8 1m5.5 6.472C12.218 8.402 10.232 9 8 9s-4.218-.599-5.5-1.528v3.563l.007.06c.04.347.367.938 1.41 1.499 1 .537 2.435.906 4.083.906s3.083-.369 4.083-.906c1.043-.56 1.37-1.152 1.41-1.5l.007-.059zM8 2.5q-.485 0-.943.041c-1.24.11-2.315.427-3.117.853l-.07.039c-.988.543-1.312 1.11-1.36 1.455A1 1 0 0 0 2.5 5c0 .334.251.93 1.295 1.526C4.796 7.1 6.28 7.5 8 7.5s3.204-.401 4.205-.974C13.25 5.93 13.5 5.334 13.5 5a1 1 0 0 0-.01-.112c-.049-.345-.372-.912-1.36-1.455l-.071-.04c-.802-.425-1.878-.743-3.117-.852Q8.485 2.501 8 2.5' clip-rule='evenodd'/%3E%3C/svg%3E");
1630+
}
1631+
1632+
@mixin vf-icon-storage-volume($color: $colors--light-theme--icon) {
1633+
background-image: vf-icon-storage-volume-url($color);
1634+
}
1635+
1636+
@mixin vf-icon-storage-volume-themed {
1637+
@include vf-themed-icon($light-value: vf-icon-storage-volume-url($colors--light-theme--icon), $dark-value: vf-icon-storage-volume-url($colors--dark-theme--icon));
1638+
}

‎scss/_patterns_icons.scss‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
@include vf-p-icon-spinner;
3232
@include vf-p-icon-show;
3333
@include vf-p-icon-hide;
34+
@include vf-p-icon-storage-bucket;
35+
@include vf-p-icon-storage-pool;
36+
@include vf-p-icon-storage-volume;
3437

3538
// social icons
3639
@include vf-p-icon-facebook;
@@ -2067,4 +2070,27 @@
20672070
}
20682071
}
20692072

2070-
// **Base and Pattern mixins accurate as of October 2025**
2073+
// ICONS ADDED IN FEBRUARY 2026
2074+
2075+
@mixin vf-p-icon-storage-bucket {
2076+
.p-icon--storage-bucket {
2077+
@extend %icon;
2078+
@include vf-icon-storage-bucket-themed;
2079+
}
2080+
}
2081+
2082+
@mixin vf-p-icon-storage-pool {
2083+
.p-icon--storage-pool {
2084+
@extend %icon;
2085+
@include vf-icon-storage-pool-themed;
2086+
}
2087+
}
2088+
2089+
@mixin vf-p-icon-storage-volume {
2090+
.p-icon--storage-volume {
2091+
@extend %icon;
2092+
@include vf-icon-storage-volume-themed;
2093+
}
2094+
}
2095+
2096+
// **Base and Pattern mixins accurate as of February 2026**

‎scss/standalone/patterns_icons-additional.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,9 @@
135135
@include vf-p-icon-status-waiting;
136136
@include vf-p-icon-status;
137137
@include vf-p-icon-stop;
138+
@include vf-p-icon-storage-bucket;
139+
@include vf-p-icon-storage-pool;
140+
@include vf-p-icon-storage-volume;
138141
@include vf-p-icon-submit-bug;
139142
@include vf-p-icon-success-grey;
140143
@include vf-p-icon-switcher-dashboard;

‎templates/docs/examples/patterns/icons/icons-additional.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,11 @@
169169
<i class="p-icon--generative-ai is-dark"></i>
170170
<i class="p-icon--ignored is-dark"></i>
171171
<i class="p-icon--vulnerable is-dark"></i>
172+
173+
<!-- Icons added in February 2026 v4.43 -->
174+
<i class="p-icon--storage-volume is-dark"></i>
175+
<i class="p-icon--storage-pool is-dark"></i>
176+
<i class="p-icon--storage-bucket is-dark"></i>
172177
</div>
173178

174179
<div>
@@ -334,5 +339,10 @@
334339
<i class="p-icon--generative-ai"></i>
335340
<i class="p-icon--ignored"></i>
336341
<i class="p-icon--vulnerable"></i>
342+
343+
<!-- Icons added in February 2026 v4.43 -->
344+
<i class="p-icon--storage-volume"></i>
345+
<i class="p-icon--storage-pool"></i>
346+
<i class="p-icon--storage-bucket"></i>
337347
</div>
338348
{% endblock %}

‎templates/docs/patterns/icons/index.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ context:
2222

2323
{% set status_icons = ['error', 'warning', 'success', 'information'] %}
2424

25-
{% set additional_icons = ['applications', 'controllers', 'credit-card', 'fullscreen', 'history', 'models', 'machines', 'pin', 'units', 'priority-critical', 'priority-high', 'priority-low', 'priority-medium', 'priority-negligible', 'priority-unknown', 'add-canvas', 'add-logical-volume', 'add-partition', 'back-to-top', 'begin-downloading', 'bundle', 'canvas', 'change-version', 'comments', 'conflict-grey', 'conflict-resolution-grey', 'conflict-resolution', 'conflict', 'connected', 'containers', 'copy-to-clipboard', 'desktop', 'disconnect', 'edit', 'export', 'exposed', 'filter', 'fork', 'get-link', 'halfscreen-bar', 'heading', 'highlight-off', 'highlight-on', 'home', 'import', 'in-progress', 'inspector-debug', 'loading-steps', 'lock-locked-active', 'lock-locked', 'lock-unlock', 'maximise-bar', 'minimise-bar', 'mount-2', 'mount', 'open-terminal', 'pause', 'plans', 'play', 'pods', 'power-error', 'power-off', 'power-on', 'profile', 'restart', 'revisions', 'security', 'settings', 'sort-both', 'sort-down', 'sort-up', 'starred', 'status-failed-small', 'status-in-progress-small', 'status-in-progress', 'status-queued-small', 'status-queued', 'status-succeeded-small', 'status-waiting-small', 'status-waiting', 'status', 'stop', 'submit-bug', 'switcher-dashboard', 'switcher-environments', 'switcher', 'tag', 'task-outstanding', 'timed-out-grey', 'timed-out', 'topic', 'unit-pending', 'unit-running', 'unmount', 'unstarred', 'user-group', 'video-play', 'warning-grey', 'archive', 'arrow-bottom-left', 'arrow-bottom-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-top-left', 'arrow-top-right', 'arrow-up', 'blueprint', 'book', 'certificate', 'certification', 'cluster-host', 'contact', 'contextual-menu', 'cursor', 'file-blank', 'file', 'folder', 'gift', 'image', 'iso', 'log-out', 'map', 'notifications', 'location', 'private-key', 'profiles', 'quote', 'repository', 'security-error', 'security-tick', 'security-warning', 'select-add', 'select-remove', 'select', 'single-host', 'snapshot', 'snooze', 'statistics', 'thumbs-down', 'thumbs-up', 'tidy', 'toggle-side-nav', 'turn-off-notification', 'upload', 'usb', 'website'] %}
25+
{% set additional_icons = ['applications', 'controllers', 'credit-card', 'fullscreen', 'history', 'models', 'machines', 'pin', 'units', 'priority-critical', 'priority-high', 'priority-low', 'priority-medium', 'priority-negligible', 'priority-unknown', 'add-canvas', 'add-logical-volume', 'add-partition', 'back-to-top', 'begin-downloading', 'bundle', 'canvas', 'change-version', 'comments', 'conflict-grey', 'conflict-resolution-grey', 'conflict-resolution', 'conflict', 'connected', 'containers', 'copy-to-clipboard', 'desktop', 'disconnect', 'edit', 'export', 'exposed', 'filter', 'fork', 'generative-ai', 'get-link', 'halfscreen-bar', 'heading', 'highlight-off', 'highlight-on', 'home', 'ignored', 'import', 'in-progress', 'inspector-debug', 'loading-steps', 'lock-locked-active', 'lock-locked', 'lock-unlock', 'maximise-bar', 'minimise-bar', 'mount-2', 'mount', 'open-terminal', 'pause', 'plans', 'play', 'pods', 'power-error', 'power-off', 'power-on', 'profile', 'restart', 'revisions', 'security', 'settings', 'sort-both', 'sort-down', 'sort-up', 'starred', 'status-failed-small', 'status-in-progress-small', 'status-in-progress', 'status-queued-small', 'status-queued', 'status-succeeded-small', 'status-waiting-small', 'status-waiting', 'status', 'stop', 'submit-bug', 'switcher-dashboard', 'switcher-environments', 'switcher', 'tag', 'task-outstanding', 'timed-out-grey', 'timed-out', 'topic', 'unit-pending', 'unit-running', 'unmount', 'unstarred', 'user-group', 'video-play', 'warning-grey', 'archive', 'arrow-bottom-left', 'arrow-bottom-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-top-left', 'arrow-top-right', 'arrow-up', 'blueprint', 'book', 'certificate', 'certification', 'cluster-host', 'contact', 'contextual-menu', 'cursor', 'file-blank', 'file', 'folder', 'gift', 'image', 'iso', 'log-out', 'map', 'notifications', 'location', 'private-key', 'profiles', 'quote', 'repository', 'security-error', 'security-tick', 'security-warning', 'select-add', 'select-remove', 'select', 'single-host', 'snapshot', 'snooze', 'statistics', 'thumbs-down', 'thumbs-up', 'tidy', 'toggle-side-nav', 'turn-off-notification', 'upload', 'usb', 'vulnerable', 'website'] %}
2626

27-
{% set additional_icons_new = ['generative-ai', 'ignored', 'vulnerable'] %}
27+
{% set additional_icons_new = [ 'storage-bucket', 'storage-pool', 'storage-volume'] %}
2828

2929
{% set social_icons = ['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'github', 'rss', 'email'] %}
3030

@@ -105,7 +105,7 @@ Outside of the standard set, additional icons are available for use, and need to
105105

106106
### Recently Added Icons {{ status("new") }}
107107

108-
In Vanilla 4.37.0 we introduced an additional icon listed below.
108+
In Vanilla 4.43.0 we introduced additional icons listed below.
109109

110110
{{ icon_section(additional_icons_new, 'light')}}
111111

0 commit comments

Comments
 (0)