Skip to content
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: googleicons provider #133

Merged
merged 4 commits into from
Sep 11, 2024
Merged

feat: googleicons provider #133

merged 4 commits into from
Sep 11, 2024

Conversation

qwerzl
Copy link
Member

@qwerzl qwerzl commented Apr 22, 2024

This PR resolves #127, adds a new googleicons provider. One thing that's weird is that Google seems to return an invalid JSON in their https://fonts.google.com/metadata/icons endpoints (There are random characters on the first line). So the first line is ignored.

@qwerzl qwerzl requested a review from danielroe April 22, 2024 03:28
@codecov-commenter
Copy link

codecov-commenter commented Apr 22, 2024

Codecov Report

Attention: Patch coverage is 57.60000% with 53 lines in your changes missing coverage. Please review.

Project coverage is 40.61%. Comparing base (ef74666) to head (c503a8d).
Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
playground/pages/providers/googleicons.vue 0.00% 45 Missing and 1 partial ⚠️
src/providers/googleicons.ts 90.90% 7 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #133      +/-   ##
==========================================
+ Coverage   40.00%   40.61%   +0.61%     
==========================================
  Files          57       59       +2     
  Lines        3435     3560     +125     
  Branches      433      437       +4     
==========================================
+ Hits         1374     1446      +72     
- Misses       2023     2075      +52     
- Partials       38       39       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@AndersCV
Copy link

@qwerzl That was quick! Would it be possible to also specificy custom values for the font variations. Currently it's set to opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 but with the possibility to add our own values here we can substantially reduce the size of the file that is being requested. As an example this is our current font variations allowing for the smallest file size possible: :opsz,FILL@20,0..1

@danielroe
Copy link
Member

@AndersCV Would there be a way to detect what you need without configuration, do you think? What does your usage look like?

@AndersCV
Copy link

@danielroe

Currently we're using the "@nuxtjs/google-fonts": "3.0.2", module to request our font files with this config in our nuxt.config.ts

googleFonts: {
    display: 'swap',
    families: {
      'Material Symbols Rounded:opsz,FILL@20,0..1': true,
    },
  },

In our case we have a simple <Icon> component that accepts only one prop which is "fill: 0 | 1" because our design makes use of icons with both fill: 0 and fill: 1.

This is purposely done so we can request a font file that is as small in file size as possible, otherwise the whole material symbols font file can be several MBs which is not great. Ideally we would like to reduce the file size further by somehow only including the nessecary icons, but I think thats beyond my expertise. I think our current file size comes down to 440~kb.

Detecting this without some form of configuration I don't think is possible as the font-family is applied inside our custom component.

@qwerzl
Copy link
Member Author

qwerzl commented Apr 23, 2024

I guess the first thing we should do is to support setting variable weight ranges. Currently every variable font is defaulted to maximum weight ranges for every provider.

@qwerzl qwerzl closed this May 30, 2024
@dosubot dosubot bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label May 30, 2024
@qwerzl
Copy link
Member Author

qwerzl commented May 30, 2024

Sorry for the accidentally closing this PR! Reopening it.

@qwerzl qwerzl reopened this May 30, 2024
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels May 30, 2024
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 11, 2024
@danielroe danielroe merged commit f4cf7e8 into nuxt:main Sep 11, 2024
1 check passed
@github-actions github-actions bot mentioned this pull request Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm This PR has been approved by a maintainer size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for Google Material Symbols
4 participants