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

Fix oversized inline SVGs when css is disabled #761

Merged
merged 8 commits into from
Aug 23, 2021

Conversation

andymantell
Copy link
Contributor

@andymantell andymantell commented Aug 3, 2021

Description

Add width, height, stroke and fill attributes to inline SVGs in order that they render at appropriate sizes when viewed with disabled/broken/missing CSS

Fixes #747

Checklist

@andymantell andymantell marked this pull request as ready for review August 3, 2021 12:49
@andymantell andymantell requested a review from chrimesdev August 3, 2021 12:49
@andymantell andymantell changed the title Fix presentation of nhs logo when css is disabled Fix oversized inline SVGs when css is disabled Aug 3, 2021
@chrimesdev
Copy link
Member

This looks good to me, we just need to update the HTML markup in the individual component README files eg. https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/components/action-link/README.md

We're planning on moving the HTML markup out of the README and just have the single source of HTML/Nunjucks truth on the NHS digital service manual - but for now we best just update it in there too.

Also I think we might need to update the SVG asset files incase anyone uses them for includes found in the packages/assets/icons folder eg. https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/assets/icons/icon-arrow-left.svg?short_path=e101404

@andymantell
Copy link
Contributor Author

@chrimesdev For the heights/widths inside the SVG files themselves - some of the SVGs are used in multiple places with different dimensions, so it's not possible for me to set the "correct" dimensions in each file for every case. I have therefore defaulted the SVG files to 34px x 34px which is the same as the default $nhsuk-icon-size from the SCSS. If people are including them in this manner, this should still be sufficient to tidy up the default output.

@andymantell
Copy link
Contributor Author

@chrimesdev I have addressed your comments and this one is ready for review again. Cheers!

Copy link
Member

@chrimesdev chrimesdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good thanks @andymantell

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Consider the appearance of components when CSS is not loaded
2 participants