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

[ticket/14268] SVG version of icons #4014

Closed
wants to merge 6 commits into from

Conversation

@hanakin
Copy link
Member

commented Nov 4, 2015

TODO:

  • Test loading vs font-awsome
  • use font-size to adjust size of icon
  • Test overall page specific loading
  • Fix ajax.js removal of read icons when marked is clicked
  • Check all display inline/inline block
  • Test duotone icons? with hover
  • Scrub all icons for appearance
  • Possibly replace topic status icons with paging button versions
  • Test alongside imageset pr SVGs possibly improve it as well
  • Update fix any color issues based on #3867

In order to make the best choice for how to handle the icons we need a side by side comparisons. Which means we need a PR with SVG icons.

sorry I have not been very active as of late but have been fiddling around with this. Basically determining the ups and downs and which way to implement it.

Findings:

SVG:

  • requires all the SVG code to be rendered on every page. thats a 60kb increase in all cached pages. This is based on the inclusion of only those icons we need which is around 66 icons vs the nearly 600 font-awesome gives us without the need to cache it all locally.
  • gives us more controls over what icons we want and the ability to add multiple color if we want.

~ the hover state is controlled in a very hacky manner and will still work for the primary paths color regardless of any of the other paths below it.

will expand on this as time goes on...

ticket: https://tracker.phpbb.com/browse/PHPBB3-14268

PHPBB3-14268

@CHItA CHItA added this to the 3.2.0-a2 milestone Nov 4, 2015

@VSEphpbb

This comment has been minimized.

Copy link
Member

commented Nov 4, 2015

Why not break up the icons into smaller "sprites" since we don't need all 66 all the time.

navbar sprite
editing sprite
common sprite
etc...

@hanakin

This comment has been minimized.

Copy link
Member Author

commented Nov 4, 2015

will have to look into it but im not so optimistic that splitting it will really accomplish much of an improvement as u may think since most of the ions are used on multiple sections and several times they are all required. It may not be that much of a size difference overall not to mention its easier only having to edit one file for all the icons. Especially if you get into more than one color.

@VSEphpbb

This comment has been minimized.

Copy link
Member

commented Nov 5, 2015

So the SVG icons look identical to font awesome's? I was hoping we'd be able to revert back to some of pro silver's original icons here too, mainly those in the nav bars.

@hanakin

This comment has been minimized.

Copy link
Member Author

commented Nov 5, 2015

for comparison and testing the icons are identical... design can be changed/improved once we work out the kinks. but the old look will not work. Too complicated and from a design standpoint they never really fit they were all over the place.

@@ -36,7 +36,7 @@ <h2 class="faq-title">{faq_block.BLOCK_TITLE}</h2>
<dd>{faq_block.faq_row.FAQ_ANSWER}</dd>
</dl>
<a href="#faqlinks" class="top">
<i class="icon fa-chevron-circle-up fa-fw icon-gray" aria-hidden="true"></i><span>{L_BACK_TO_TOP}</span>
<svg class="icon icon-gray"><use xlink:href="#top"></use></svg><span>{L_BACK_TO_TOP}</span>

This comment has been minimized.

Copy link
@callumacrae

callumacrae Nov 8, 2015

Contributor

Alt text?

@Nicofuma Nicofuma modified the milestones: 3.2.0-a2, 3.2.0-a3 Dec 19, 2015

@Nicofuma Nicofuma modified the milestones: 3.2.0-b1, 3.2.0-b2, 3.3.0-a1 Feb 4, 2016

@hanakin hanakin closed this Mar 18, 2017

@hanakin hanakin removed this from the 4.0.0-a1 milestone Mar 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.