Update icons to v2.2 and manage future updates - #3729
Merged
Merged
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
… more sipmle to retrieve by a search
…ut and improve SVG path reporting
…s - 1st working version
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
… in components, to be able to directly see where we use component alert icons in code
# Conflicts: # packages/orange-compact/scss/tokens/_composite.scss # packages/orange/scss/tokens/_composite.scss # packages/sosh/scss/tokens/_composite.scss # scss/_links.scss # scss/forms/_select-input.scss # scss/forms/_text-input.scss # scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css # scss/tests/snapshot-tests/__snapshots__/ouds-web.css # site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg # site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg # site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
louismaximepiton
approved these changes
Aug 12, 2026
louismaximepiton
left a comment
louismaximepiton
left a comment
Member
There was a problem hiding this comment.
I'm fine with it, just the output between sprite and composite looks completely different, is there any reason for this ?
| <path fill-rule="evenodd" | ||
| d="M19.01 8.676c-.246-.1-.5-.193-.765-.28.506-2.05.198-4.603-1.135-5.22-1.104-.637-2.647-.273-4.354 1.023l.858.858c.928-.626 1.926-1.281 2.896-.841 1.054.772.798 2.527.577 3.848a19.641 19.641 0 0 0-2.585-.443c-.84-1.148-1.735-2.17-2.796-3.073C7.633.992 4.565 3.38 5.75 8.393c-5.262 1.608-5.208 5.617.032 7.198-1.138 4.807 1.636 7.313 5.587 4.153 1.867-1.48 3.33-3.422 4.533-5.484l-.654-1.294c-1.078 2.002-2.414 3.9-4.104 5.405-3.24 2.833-5.042 1.75-4.204-2.452.83.198 1.673.342 2.522.431.331.454.672.885 1.02 1.29l.858-.842c-.093-.108-.185-.22-.277-.332.285.01.3.016.59.017l1.007-1.213c-.847.028-1.694.008-2.538-.062a23.169 23.169 0 0 1-1.285-2.091l-.6 1.37c.106.18.215.358.325.534a17.553 17.553 0 0 1-1.333-.266c.124-.42.27-.849.436-1.284l.01.018.612-1.45-.006-.01a23.308 23.308 0 0 1 1.888-3.267 23.35 23.35 0 0 1 3.672.002c1.253 1.827 2.298 3.87 2.925 5.99l-.153.036-.988 1.413c.493-.079.97-.174 1.429-.285.628 3.08-.182 5.376-3.406 3.066l-.85.866c3.905 2.982 6.507.377 5.413-4.26 4.513-1.318 5.677-4.998.797-6.914ZM8.115 9.764c-.347.566-.889 1.736-1.186 2.343a19.578 19.578 0 0 0-.852 2.318c-4.047-1.372-4.103-3.47-.033-4.864.122.417.264.842.425 1.272l.804-1.352a9.099 9.099 0 0 1-.077-.254c.45-.11.923-.204 1.413-.282-.168.268-.333.54-.494.819Zm3.879-2.274c-.1 0-.701.01-.883.017.085-.104.17-.207.255-.307l-.85-.85c-.342.397-.678.822-1.005 1.268a19.62 19.62 0 0 0-2.604.445c-1.205-6.659 3.548-3.712 5.995-.556-.3-.01-.603-.016-.908-.017Zm8.431 5.58c-.515.52-1.612 1.066-2.506 1.352-.562-1.911-1.455-3.772-2.52-5.473.486.077.954.17 1.4.28-.033.115-.068.23-.105.347l.75 1.482c.195-.506.365-1.006.508-1.495 1.541.508 4.193 1.851 2.473 3.507Zm-8.431-2.964a1.921 1.921 0 1 0 0 3.843 1.921 1.921 0 0 0 0-3.843Z" | ||
| clip-rule="evenodd"/> | ||
| <path d="m19 8.7-.8-.3c.6-2 .2-4.6-1-5.2q-1.8-1-4.4 1l.8.9c1-.7 2-1.3 3-.9 1 .8.7 2.5.5 3.9l-2.6-.5q-1.2-1.6-2.8-3c-4-3.6-7.1-1.2-6 3.8C.5 10 .5 14 5.8 15.6c-1 4.8 1.7 7.3 5.7 4.1q2.7-2.2 4.5-5.4l-.7-1.3q-1.5 3-4 5.4C7.8 21.2 6 20 6.8 15.9l2.6.4 1 1.3.8-.8-.2-.3h.6l1-1.2H10L8.8 13l-.6 1.4.4.5-1.4-.2.5-1.3.6-1.5 1.9-3.2h3.6q2 2.7 3 6h-.2l-1 1.4 1.5-.3c.6 3.1-.2 5.4-3.5 3l-.8 1c3.9 3 6.5.3 5.4-4.3 4.5-1.3 5.7-5 .8-7M8.1 9.9 7 12l-.8 2.3C2 13.1 2 11 6 9.6l.4 1.2.8-1.3-.1-.3L8.6 9zM12 7.5h-1l.3-.3-.9-.9-1 1.3-2.6.5c-1.2-6.7 3.6-3.7 6-.6zm8.5 5.6a7 7 0 0 1-2.5 1.3q-.8-2.9-2.5-5.5l1.4.3-.1.4.7 1.5.6-1.5c1.5.5 4.1 1.8 2.4 3.5M12 10a2 2 0 1 0 0 3.8 2 2 0 0 0 0-3.8"/> |
Member
There was a problem hiding this comment.
Suggested change
| <path d="m19 8.7-.8-.3c.6-2 .2-4.6-1-5.2q-1.8-1-4.4 1l.8.9c1-.7 2-1.3 3-.9 1 .8.7 2.5.5 3.9l-2.6-.5q-1.2-1.6-2.8-3c-4-3.6-7.1-1.2-6 3.8C.5 10 .5 14 5.8 15.6c-1 4.8 1.7 7.3 5.7 4.1q2.7-2.2 4.5-5.4l-.7-1.3q-1.5 3-4 5.4C7.8 21.2 6 20 6.8 15.9l2.6.4 1 1.3.8-.8-.2-.3h.6l1-1.2H10L8.8 13l-.6 1.4.4.5-1.4-.2.5-1.3.6-1.5 1.9-3.2h3.6q2 2.7 3 6h-.2l-1 1.4 1.5-.3c.6 3.1-.2 5.4-3.5 3l-.8 1c3.9 3 6.5.3 5.4-4.3 4.5-1.3 5.7-5 .8-7M8.1 9.9 7 12l-.8 2.3C2 13.1 2 11 6 9.6l.4 1.2.8-1.3-.1-.3L8.6 9zM12 7.5h-1l.3-.3-.9-.9-1 1.3-2.6.5c-1.2-6.7 3.6-3.7 6-.6zm8.5 5.6a7 7 0 0 1-2.5 1.3q-.8-2.9-2.5-5.5l1.4.3-.1.4.7 1.5.6-1.5c1.5.5 4.1 1.8 2.4 3.5M12 10a2 2 0 1 0 0 3.8 2 2 0 0 0 0-3.8"/> | |
| <path d="m19 8.7-.8-.3c.6-2 .2-4.6-1-5.2q-1.8-1-4.4 1l.8.9c1-.7 2-1.3 3-.9 1 .8.7 2.5.5 3.9l-2.6-.5q-1.2-1.6-2.8-3c-4-3.6-7.1-1.2-6 3.8C.5 10 .5 14 5.8 15.6c-1 4.8 1.7 7.3 5.7 4.1q2.7-2.2 4.5-5.4l-.7-1.3q-1.5 3-4 5.4C7.8 21.2 6 20 6.8 15.9l2.6.4 1 1.3.8-.8-.2-.3h.6l1-1.2H10L8.8 13l-.6 1.4.4.5-1.4-.2.5-1.3.6-1.5 1.9-3.2h3.6q2 2.7 3 6h-.2l-1 1.4 1.5-.3c.6 3.1-.2 5.4-3.5 3l-.8 1c3.9 3 6.5.3 5.4-4.3 4.5-1.3 5.7-5 .8-7M8.1 9.9 7 12l-.8 2.3C2 13.1 2 11 6 9.6l.4 1.2.8-1.3-.1-.3L8.6 9zM12 7.5h-1l.3-.3-.9-.9-1 1.3-2.6.5c-1.2-6.7 3.6-3.7 6-.6zm8.5 5.6a7 7 0 0 1-2.5 1.3q-.8-2.9-2.5-5.5l1.4.3-.1.4.7 1.5.6-1.5c1.5.5 4.1 1.8 2.4 3.5M12.5 10a2 2 0 1 0 0 3.8 2 2 0 0 0 0-3.8"/> |
Looks better, but why we need it ? Maybe we can lower the svgo on sprite ?
| <path d="M21.4 19.7 16 14.3a7.5 7.5 0 1 0-1.8 1.7l5.5 5.4h.8l1-.9v-.8M9.8 15a5.1 5.1 0 1 1 0-10.2 5.1 5.1 0 0 1 0 10.2"/> | ||
| </symbol> | ||
|
|
||
| <!-- *** EXAMPLES OF ICONS FOR FOOTERS *** --> |
Member
There was a problem hiding this comment.
Footer icons needs fill-rule=evenodd
boosted-bot
moved this from Need Dev Review
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
louismaximepiton
changed the title
Collaborator
@hannahiss , I think it's ok, designer can technically use a functional icon in a button and the overview of the button component doesn't say otherwise. So let's stick to that. |
vprothais
requested changes
Aug 26, 2026
| // OUDS mod | ||
| @each $icon, $svg in $svg-as-custom-props { | ||
| --#{$prefix}#{$icon}-icon: #{escape-svg($svg)}; | ||
| --#{$prefix}#{$icon}: #{escape-svg($svg)}; |
Collaborator
There was a problem hiding this comment.
The same change must be done in the dual mode documentation since we duplicated some part of root, including this icons generation.
| @@ -0,0 +1,701 @@ | |||
| #!/usr/bin/env node | |||
|
|
|||
| // update-component-icons.mjs | |||
Collaborator
There was a problem hiding this comment.
Suggested change
| // update-component-icons.mjs | |
| // update-composite-icons.mjs |
| for (const [lineIndex, line] of lines.entries()) { | ||
| const parsedComment = parseCommentPath(line) | ||
| if (parsedComment) { | ||
| pendingComment = { ...parsedComment, commentLineIndex: lineIndex } |
Collaborator
There was a problem hiding this comment.
I used an Agent to review this logic and it detected a risk with the silent overwriting of pendingComment. Here is the review :
This parsing loop tracks a single pendingComment state between the icon comment line (// path v1.0) and the variable line that should follow it. This creates three scenarios where a comment can be silently dropped without any trace in the output:
- Two icon comments appear in a row without a variable line in between — the first pendingComment is overwritten by the second, with no indication that the first one was discarded.
- An icon comment is followed by another comment line that doesn't match the expected variable patterns — pendingComment is reset to null, silently discarding it.
- The last icon comment in the block is never followed by a variable line at all — the loop ends with a non-null pendingComment that is simply never used.
In all three cases, the corresponding icon entry is effectively skipped from the icon map and won't appear in the report (identical/modified/missing), even though it exists in the source file. Since the whole script relies on regex-based, line-by-line parsing of the SCSS file, any unexpected formatting drift (manual edits, inconsistent comment style, copy-paste errors) can trigger these cases without any visible error — the script will just complete "successfully" with fewer icons processed than expected.
boosted-bot
moved this from Need Lead Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
vprothais
approved these changes
Aug 26, 2026
boosted-bot
moved this from Dev Review In Progress
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
github-project-automation
Bot
moved this from Need Lead Dev Review
to Done
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Types of change
Related issues
Closes #3652
Context & Motivation
This PR is to update all OUDS icons to v2.1 across all 3 themes(Orange, Sosh, Orange Compact) and simplify the future updates of icons.
It updates the SVG paths in sprite and composite files, reorganizes icon naming, removes useless icons and adds two new build scripts for automated icon comparison/update.
Description
1. Composite Icons (
_composite.scss) — All 3 BrandsThe icon section of
_composite.scsshas been completely reorganized with clear section headers by component (// * Alert *,// * Badge *,// * Button *, etc.), replacing the previous flat layout. When identical icons are detected, they are reused to lighten the distributed css files.Changes for Orange and Orange-compact component icons
$alert-icon-success$alert-icon-info$alert-icon-warning-external$alert-icon-warning-internal$alert-icon-important$badge-icon-positive$badge-icon-info$badge-icon-warning-external$badge-icon-warning-internal$badge-icon-negative$breadcrumb-divider$breadcrumb-divider-icon$btn-previous-icon$btn-next-icon$btn-expurge-icon$cross-icon-stroke$bullet-list-marker-level-0$bullet-list-marker-level-1$bullet-list-marker-level-2$bullet-list-empty-marker$bullet-list-marker-tick$checkbox-selected-icon$form-check-input-checked-bg-image$checkbox-undetermined-icon$form-check-input-indeterminate-bg-image$chip-tick-icon$link-previous-icon$chevron-icon$radio-button-selected-icon$form-check-radio-checked-bg-image$select-input-chevron$select-input-expanded-chevron$switch-selected-icon$form-switch-checked-bg-imageChanges for Sosh component icons
$alert-icon-success$alert-icon-info$alert-icon-warning-external$alert-icon-warning-internal$alert-icon-important$badge-icon-positive$badge-icon-info$badge-icon-warning-external$badge-icon-warning-internal$badge-icon-negative$breadcrumb-divider$breadcrumb-divider-icon$btn-previous-icon$btn-next-icon$btn-expurge-icon$cross-icon-stroke$bullet-list-marker-level-0$bullet-list-marker-level-1$bullet-list-marker-level-2$bullet-list-empty-marker$bullet-list-marker-tick$checkbox-selected-icon$form-check-input-checked-bg-image$checkbox-undetermined-icon$form-check-input-indeterminate-bg-image$chip-tick-icon$link-previous-icon$chevron-icon$radio-button-selected-icon$form-check-radio-checked-bg-image$select-input-chevron$select-input-expanded-chevron$switch-selected-icon$form-switch-checked-bg-imageCSS Custom Properties Map Renamed
The
$svg-as-custom-propsmap keys were renamed and the suffix '-icon' previously added in root is now visible in here to ease the search of these custom props usages. There are still supposed to follow a consistent-iconsuffix convention:"chevron""chevron-icon""close"$btn-expurge-iconwhere needed and this custom prop was no longer used (some legacy usages still remain pointing directly to$cross-iconor other icons in variables.scss"success""alert-success-icon""info""alert-info-icon""warning""alert-warning-icon""warning-internal""alert-warning-internal-icon""error""alert-error-icon"The new update script also adds duplicated icons inside this map (for now
breadcrumb-divider-iconandbtn-previous-iconso they can be reused without overloading the bundle.Legacy Icons Preserved
The following legacy icons remain unchanged for backward compatibility with draft/legacy components, they should totally disappear over time:
$chevron-icon(pagination, carousel, back-to-top)$cross-icon,$burger-icon,$burger-icon-small(header)$add-icon,$remove-icon,$add-icon-sm,$remove-icon-sm(quantity-selector)$play-icon,$pause-icon(carousel)$helper-icon(text-input Bootstrap compatibility)2. Sprite Icons (
ouds-web-sprite.svg) — All 3 BrandsIcons renamed (ID changed)
main)alert-importantfunctional-status-negativealert-warning-accessiblefunctional-status-warningalert-infofunctional-status-infoalert-successfunctional-status-positivefile-earmark-richtextfile-documentbook-halfinformation-manualgrid-filldisplay-gridrepair-toolsmulti-tool-repairIcons redrawn (same ID, new paths)
copy0 0 1000 10000 0 24 24check20 0 1000 10000 0 24 24design-token-figma0 0 1000 10000 0 24 24ui-auto-mode0 0 1000 10000 0 24 24ui-dark-mode0 0 1000 10000 0 24 24ui-light-mode0 0 1000 10000 0 24 24buy0 0 1000 10000 0 24 24search0 0 1000 10000 0 24 24live-chat0 0 1000 10000 0 24 24location-pin-compass0 0 1000 10000 0 24 24mobile-network-coverage0 0 1000 10000 0 24 24child-protection0 0 1000 10000 0 24 24side-panel-show-chevron0 0 960 9600 0 24 24bug0 0 960 9600 0 24 24message-talk0 0 960 9600 0 24 24external-link0 0 960 9600 0 24 24Icons reformatted (same ID, minor changes)
downloadstyle="fill-rule:evenodd"→fill-rule="evenodd" clip-rule="evenodd"settingsstyle=→ SVG attribute; minor coordinates fixedtrashstyle=→ SVG attribute; coordinates adjusted (.6→.599,7.2→7.199,15→22.2)component-atom.246→.245,.641→.637, etc.)lightning-charge-fillIcons kept unchanged
heart-emptylock-closedaccessibility-visionhideinternetthemetraffic-coneIcons removed (no replacement)
main)alert-warning-tickdeleteexpurgechevron-expandglobe2internetmagicmenu-button-wide-fillpalette2themebraces-asteriskmulti-tool-repairtransfersui-radiosSummary
mainlightning-charge-fill(Bootstrap Icons legacy for Stackblitz).0 0 24 24(exceptlightning-charge-fillat0 0 16 16).external-linkis marked for removal with tokens v2.6.Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
mainfollowing conventional commitLive previews