@skyux/icons 8.1.0 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [8.3.0](https://github.com/blackbaud/skyux-icons/compare/8.2.0...8.3.0) (2025-07-07)
+
+
+### Features
+
+* add person-money fluent icon ([#191](https://github.com/blackbaud/skyux-icons/issues/191)) ([ececa68](https://github.com/blackbaud/skyux-icons/commit/ececa68b1cbb6e42e61b7d153fdb5165bbfa65ec))
+
+## [8.2.0](https://github.com/blackbaud/skyux-icons/compare/8.1.0...8.2.0) (2025-06-16)
+
+
+### Features
+
+* add brands and usage updates ([#187](https://github.com/blackbaud/skyux-icons/issues/187)) ([da967ab](https://github.com/blackbaud/skyux-icons/commit/da967ab14789fddd0c9ea07e947389bacdd21226))
+
 ## [8.1.0](https://github.com/blackbaud/skyux-icons/compare/8.0.0...8.1.0) (2025-06-04)
 
 

package/README.md

@@ -1,63 +1,84 @@
 # skyux-icons
 
-A glyph font and stylesheet for displaying SKY UX icons.
+## Overview
 
-## Installation
+SKY UX icons is a package that provides icon assets for the SKY UX framework.
 
-The primary method of consuming the SKY UX icon font on the web is via the Blackbaud CDN. In the following examples, you should replace `<version>` with the specific version in this project's `package.json`. As new versions are released, previous versions will continue to be hosted on the CDN for backwards compatibility.
-
-The URLs in the examples point to minified files. If you would like to load the non-minified file for debugging, remove the `.min` portion of the file name before the extension.
-
-### Importing the stylesheet via HTML
-
-`<link rel="stylesheet" href="https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/skyux-icons.min.css">`
-
-### Importing the stylesheet via CSS `@import`
+## Usage
 
-`@import url("https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/css/skyux-icons.min.css");`
+To use SKY UX icons, use the [SKY UX icon component](https://developer.blackbaud.com/skyux/components/icon).
 
-If you are using the SKY UX icon font in a non-web-based project, you may install it via NPM:
+## Adding new icons
 
-`npm install @skyux/icons`
+### Adding Fluent icons
 
-If you are using SKY UX icons in a [SKY UX](https://developer.blackbaud.com/skyux/) project, the icon font will already be imported for you.
+1. Add the icon name to the alphabetized list in `src/svg/fluent-icon-list.txt`
+   - Do not include any variant or size information
+   - Verify the icon name in the [Fluent icon GitHub repo](https://github.com/microsoft/fluentui-system-icons/tree/main/assets)
+2. Release the `skyux-icons` repo following the [release process](#release-process)
 
-## Usage
+### Adding custom icons
 
-To display an icon on an HTML page, specify an element with the CSS class `sky-i-` followed by the name of the icon. It is typical to use an `i` element for displaying icons from an icon font.
+#### Single color icons
 
-`<i class="sky-i-calendar"></i>`
+1. Add SVG files to `src/svg` using file name format: `<name>-<size>-<variant>.svg`
+2. All sizes require both a solid and line variant
+3. SVG files should contain only one path
+4. SVG files must not contain:
+   - Classes
+   - `<style>` elements
+   - Inline styles
+5. Release the `skyux-icons` repo following the [release process](#release-process)
 
-If you are using SKY UX, use the `sky-icon` component documented [here](https://host.nxt.blackbaud.com/skyux-indicators/docs/icon).
+#### Mutli-color icons
 
-`<sky-icon icon="calendar" iconType="skyux"></sky-icon>`
+SKY UX icons can support 2 colors.
 
-## Contributing
+1. Add SVG files to `src/svg` using file name format: `<name>-<size>-<variant>.svg`
+2. All sizes require both a solid and line variant
+3. Use these classes on each path for colors:
+   - Primary: `sky-i-path-1`
+   - Secondary: `sky-i-path-2`
+4. SVG files must not contain:
+   - `<style>` elements
+   - Inline styles
+5. Release the `skyux-icons` repo following the [release process](#release-process)
 
-The SKY UX icon font is generated using [Fontello](http://fontello.com/). To add new icons or change existing icons, follow these steps:
+#### Branded icons
 
-- Clone or fork this repo, then create a branch for your changes.
+Branded icons support maintaining brand color customization.
 
-- Navigate to [fontello.com](http://fontello.com/) and drag the `config.json` file in this project's `src` folder onto Fontello's homepage. This will load the font project for editing.
+1. Add SVG files to `src/svg/branded` using file name format: `<name>-<size>-<variant>.svg`
+2. All sizes require both a solid and line variant
+3. SVG files must not contain:
+   - `<style>` elements
+   - Inline styles
+4. Release the `skyux-icons` repo following the [release process](#release-process)
 
-- You will notice that the fist icon selected is blank and is named `__do_not_delete`. **DO NOT DELETE THIS ICON!** Without it, the SPA will not be able to detect that the font is loaded, causing rendering to be delayed by 3 seconds.
+## Release Process
 
-- To add a new icon, drag the SVG file onto Fontello's homepage, then switch to the "Customize Names" tab and give the icon a name that follows the [kebab-case](https://medium.com/better-programming/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) convention (where each word is all lowercase and separated by a hyphen).
+### Minor Version
 
-- To edit an existing icon, take note of the existing icon's name on the "Customize Names" tab and the character code on the "Customize Codes" tab on Fontello's homepage. Return to the "Select Icons" tab and drag the new icon's SVG file onto the page, then delete the existing icon. Change the new icon's name and character codes to the same values as the icon you are replacing. **When changing an existing icon, it is imperitave that you use the same name and character code for its replacement; otherwise you will break the font for consumers!**
+1. Release `skyux-icons`
+2. If metadata changes have been made, update the `@skyux/icons` package version in `@skyux/icon` and release the monorepo.
 
-- When you have finished editing the icons, click the "Download webfont" button at the top of the page.
+### Major Version
 
-- Unzip the contents of the downloaded file and drop them in this project's `src` folder, overwriting any existing files.
+1. Release `skyux-icons`
+2. Update `@skyux/icon` component:
+   - `@skyux/icons` package version
+   - the major version in the CDN URL in `SkyIconSvgResolverService`
+3. Release the monorepo
+4. Update the docs SPA and omnibar SPA packages
 
-- Update the `metadata.json` file at the root of this project with your added or updated icons, following the existing pattern in that file. Each new icon should be listed in this file with a `usage` property which lists the scenarios where the new icon should be used. Documentation is generated from this file, so if an icon is not listed, it will not be listed in the documentation and therefore hidden from consumers. If you are deprecating an icon, you can remove it from the list which will remove it from the documentation but not affect any code that already uses this icon. This is a way to "remove" an icon while not breaking existing consumers.
+## Maintenance
 
-- Commit your changes to your branch and push them to GitHub, then create a pull request so they can be reviewed.
+**Important:** All updates to the `@fluentui/svg-icons` package require a breaking change release due to potential visual changes in any version (major, minor, or patch).
 
-- Your work is now done. The owners of this repo will handle reviewing, merging and releasing your changes.
+To create a breaking change, add `!` to your commit title, i.e. `feat!: update fluent icon version`
 
 ## Legal
 
-Icons which have an `owner` property in the `metadata.json` file are the property of the listed organization.
+Icons that have an `owner` property in the `metadata.json` file are the property of the listed organization.
 
 Icons owned by `Webalys, LLC` must only be used within the context of the SKY UX user experience framework.

package/assets/manifest.json

@@ -265,7 +265,9 @@
     {
       "name": "chevron-down",
       "usage": [
-        "Expand"
+        "Expand",
+        "Next (down)",
+        "Collapse tree node"
       ],
       "faNames": [
         "chevron-down",
@@ -277,7 +279,8 @@
     {
       "name": "chevron-up",
       "usage": [
-        "Collapse"
+        "Collapse",
+        "Previous (up)"
       ],
       "faNames": [
         "chevron-up",
@@ -289,7 +292,8 @@
     {
       "name": "chevron-right",
       "usage": [
-        "Navigate to"
+        "Next",
+        "Expand tree node"
       ],
       "faNames": [
         "chevron-right",
@@ -301,7 +305,7 @@
     {
       "name": "chevron-left",
       "usage": [
-        "Back to"
+        "Previous"
       ],
       "faNames": [
         "chevron-left",
@@ -313,7 +317,8 @@
     {
       "name": "double-chevron-left",
       "usage": [
-        "Collapse navigation"
+        "Collapse navigation",
+        "Collapse field"
       ],
       "faNames": [
         "angle-double-left"
@@ -461,23 +466,23 @@
     {
       "name": "help-line",
       "usage": [
-        "Help"
+        "Help",
+        "Information"
       ],
       "faNames": [
-        "question-circle",
-        "question-circle-o"
+        "info-circle"
       ],
-      "iconName": "question-circle",
+      "iconName": "info",
       "code": 59434
     },
     {
       "name": "help-solid",
       "usage": [
-        "Help"
+        "Help",
+        "Information"
       ],
       "faNames": [
-        "question-circle",
-        "question-circle-o"
+        "info-circle"
       ],
       "code": 59399
     },
@@ -1461,34 +1466,6 @@
       ],
       "code": 59529
     },
-    {
-      "name": "collapse-2-line",
-      "usage": [
-        "Collapse nav"
-      ],
-      "faNames": [
-        "angle-double-left"
-      ],
-      "owner": [
-        "Webalys, LLC"
-      ],
-      "iconName": "chevron-double-left",
-      "code": 59530
-    },
-    {
-      "name": "expand-2-line",
-      "usage": [
-        "Expand nav"
-      ],
-      "faNames": [
-        "angle-double-right"
-      ],
-      "owner": [
-        "Webalys, LLC"
-      ],
-      "iconName": "chevron-double-right",
-      "code": 59534
-    },
     {
       "name": "database-2-line",
       "usage": [
@@ -2012,6 +1989,7 @@
     "person-available",
     "person-circle",
     "person-lock",
+    "person-money",
     "person-note",
     "person-support",
     "person-tag",
@@ -2024,6 +2002,7 @@
     "power",
     "puzzle-piece",
     "question",
+    "question-circle",
     "receipt",
     "recycle",
     "ribbon",