Add credit card icon

Author: bartaz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.5",
+  "version": "4.19.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.19.0
+  features:
+    - component: Icons / Credit card
+      url: /docs/patterns/icons#new-icons
+      status: New
+      notes: We've added new credit card icon.
 - version: 4.18.0
   features:
     - component: Quote wrapper

scss/_base_icon-definitions.scss

@@ -1471,3 +1471,18 @@
 @mixin vf-icon-website-themed {
   @include vf-themed-icon($light-value: vf-icon-website-url($colors--light-theme--icon), $dark-value: vf-icon-website-url($colors--dark-theme--icon));
 }
+
+// ICONS ADDED IN JANUARY 2025 v4.19.0
+
+// credit card
+@function vf-icon-credit-card-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M13 4.5H3c-.27614 0-.5.22386-.5.5v.75h11V5c0-.27614-.2239-.5-.5-.5ZM2.5 11V7.25h11V11c0 .2761-.2239.5-.5.5H3c-.27614 0-.5-.2239-.5-.5ZM3 3c-1.10457 0-2 .89543-2 2v6c0 1.1046.89543 2 2 2h10c1.1046 0 2-.8954 2-2V5c0-1.10457-.8954-2-2-2H3Zm7.75 5.5c-.4142 0-.75.33579-.75.75v.5c0 .4142.3358.75.75.75h.5c.4142 0 .75-.3358.75-.75v-.5c0-.41421-.3358-.75-.75-.75h-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-credit-card($color) {
+  background-image: vf-icon-credit-card-url($color);
+}
+
+@mixin vf-icon-credit-card-themed {
+  @include vf-themed-icon($light-value: vf-icon-credit-card-url($colors--light-theme--icon), $dark-value: vf-icon-credit-card-url($colors--dark-theme--icon));
+}

scss/_patterns_icons.scss

@@ -2042,4 +2042,13 @@
   }
 }
 
+// ICONS ADDED IN JANUARY 2025
+
+@mixin vf-p-icon-credit-card {
+  .p-icon--credit-card {
+    @extend %icon;
+    @include vf-icon-credit-card-themed;
+  }
+}
+
 // **Base and Pattern mixins accurate as of October 2024**

scss/standalone/patterns_icons-additional.scss

@@ -42,6 +42,7 @@
 @include vf-p-icon-contextual-menu;
 @include vf-p-icon-controllers;
 @include vf-p-icon-copy-to-clipboard;
+@include vf-p-icon-credit-card;
 @include vf-p-icon-cursor;
 @include vf-p-icon-desktop;
 @include vf-p-icon-disconnect;

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

@@ -154,6 +154,9 @@
   <i class="p-icon--upload is-dark"></i>
   <i class="p-icon--usb is-dark"></i>
   <i class="p-icon--website is-dark"></i>
+
+  <!-- Icons added in January 2025 v4.19 -->
+  <i class="p-icon--credit-card is-dark"></i>
 </div>
 
 <div>
@@ -304,5 +307,8 @@
   <i class="p-icon--upload"></i>
   <i class="p-icon--usb"></i>
   <i class="p-icon--website"></i>
+
+  <!-- Icons added in January 2025 v4.19 -->
+  <i class="p-icon--credit-card"></i>
 </div>
 {% endblock %}

templates/docs/patterns/icons/index.md

@@ -22,9 +22,9 @@ context:
 
 {% set status_icons = ['error',  'warning', 'success', 'information'] %}
 
-{% set additional_icons = ['applications', 'controllers', 'fullscreen', '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', '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'] %}
+{% set additional_icons = ['applications', 'controllers', 'fullscreen', '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', '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', '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'] %}
 
-{% set additional_icons_new = ['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', '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'] %}
+{% set additional_icons_new = ['credit-card'] %}
 
 {% set social_icons = ['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'github', 'rss', 'email'] %}
 
@@ -103,7 +103,7 @@ Outside of the standard set, additional icons are available for use, and need to
 
 {{ icon_section(additional_icons, 'light')}}
 
-<span id="new-icons" class="p-status-label--positive">New</span> In Vanilla 4.17.0 we introduced additional icons listed below.
+<span id="new-icons" class="p-status-label--positive">New</span> In Vanilla 4.19.0 we introduced additional icons listed below.
 
 {{ icon_section(additional_icons_new, 'light')}}