-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add icon font files #10996
base: dev
Are you sure you want to change the base?
feat: add icon font files #10996
Conversation
`calcite-ui-icons-16.ttf`, `calcite-ui-icons-24.ttf`, `calcite-ui-icons-32.ttf` These are the 3 source files for the icon font, they contain all the single path artwork at each size. The individual sizes are to encourage users to use the font at the intended pt/px size.
codepoints.json for use when updating the font to keep the codepoints increasing numerically and avoid scrambling codepoints when adding new icons.
these svgs differ from the icon repo svgs since any icon with multiple paths have been removed (it breaks the font)
these svgs differ from the icon repo svgs since any icon with multiple paths have been removed (it breaks the font)
these svgs differ from the icon repo svgs since any icon with multiple paths have been removed (it breaks the font)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for putting this together! I have some questions before moving forward with the PR:
- Should any of these files be added to the NPM package?
- How were the font files created, is there a script somewhere? If so, we should:
- add the script(s) to
lib/
- document the build process and/or add the required commands as an npm script
- add the script(s) to
I'm hesitant to commit the mostly duplicate SVGs to the monorepo. I'm sure there's a way to programmatically exclude icons with multiple paths. If you can provide more information on the font's build process I should be able to assist with scripting a solution.
I also have a couple initial change requests:
- Can you change
font/
tofonts/
so it's aligned withicons/
- Can you move the files in
fonts/font files/
tofonts/
unless there's a good reason for the extra directory
removing svg files that are essentially duplicates Will either host these on creative lab server, or work with Ben to script a solution
removed extra unnecessary directory
changed `font/` to `fonts/` so it's aligned with `icons/`
From a doc standpoint - I think we should be a bit defensive here, with any public display. To date, from the component side, we’ve taught folks to use icons via the component and built-in properties, etc - so even if this isn’t “advertised” publicly, adding some guardrails would be nice. I also think this strategy of three “sizes” of fonts might need a bit of documentation. As a user - I might expect to use a single icon font file that I can use at any font size. While this is at odds with the “three fixed sizes” approach to some degree, it would be nice to outline our expectations with these. |
Related Issue: #56
Summary
There has been multiple requests for a font using the Calcite UI icons. This is filling that ask.
There are 3 font files and corresponding json files to organize and standardize their codepoints.
Also contained in this folder is a codepoints.json for use when updating the font (which will happen every 2 months in line with the release schedule) to keep the codepoints increasing numerically and avoid scrambling codepoints when adding new icons.
Lastly is the svgs — these are included as they differ from the repo’s svgs because we have to remove icons with multiple paths i.e. opacity.
Take a look at what I have here and let me know if there are improvements to be made. (I am unsure if the SVGs should be in the repo or only on our server, as here they are essentially duplicates?)
I am also hoping to get the codepoints converted to Unicode and included in the searchable ref page to make the font characters searchable. I’m working with @macandcheese on that [here]