assets: replace meshviewer.woff2 icon font with SVG masks#355
Merged
skorpy2009 merged 1 commit intomainfrom May 5, 2026
Merged
assets: replace meshviewer.woff2 icon font with SVG masks#355skorpy2009 merged 1 commit intomainfrom
skorpy2009 merged 1 commit intomainfrom
Conversation
grische
reviewed
May 3, 2026
Contributor
grische
left a comment
grische
left a comment
There was a problem hiding this comment.
@maurerle I think all of your SVGs are not centered which them look a bit odd in comparison to the original font variant.
Just open two tabs, one with yours and one with upstream version and switch between them. It's quite noticeable.
There "will" be a few pixels deviations on how SVGs vs fonts are rendered, but not as pronounced as now.
Drops the icomoon-managed icon font (.woff2/.woff/.ttf) in favour of individual SVG files extracted from the original TTF. New icons can now be added by dropping an .svg into assets/icons/svg/ and registering it in icon.scss, removing the round-trip through icomoon.io. Icons render via mask-image with background-color: currentColor, so existing font-size and color rules on .ion-* elements keep working unchanged. vertical-align matches the original font's value of 0 (baseline), so icon position relative to surrounding text is preserved. Three SCSS modules (_sidebar, _leaflet, _table) used raw font codepoints inline; those are converted to a new icon.icon-mask($name) mixin. Also drops three unused icon definitions (chevron-right, person, arrow-left-c) and the now-redundant \$font-family-icons variable. DEVELOPMENT.md is updated to describe the new SVG workflow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
@maurerle the icons are still off-centered. I think particularly at the "full-enter.svg" it's very easy visible. |
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
3 participants
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.
Description
Drops the icomoon-managed icon font (.woff2/.woff/.ttf) in favour of individual SVG files extracted from the original TTF. New icons can now be added by dropping an .svg into assets/icons/svg/ and registering it in icon.scss, removing the round-trip through icomoon.io.
Icons render via mask-image with background-color: currentColor, so existing font-size and color rules on .ion-* elements keep working unchanged. vertical-align matches the original font's value of 0 (baseline), so icon position relative to surrounding text is preserved.
Three SCSS modules (_sidebar, _leaflet, _table) used raw font codepoints inline; those are converted to a new icon.icon-mask($name) mixin.
Also drops three unused icon definitions (chevron-right, person, arrow-left-c) and the now-redundant $font-family-icons variable. DEVELOPMENT.md is updated to describe the new SVG workflow.
Motivation and Context
needed for #346 and general overhaul as the woff2 file is hard to patch and handle.
How Has This Been Tested?
visually using npm run dev
Screenshots/links:
Checklist: