Automattic / Automattic/jetpack
Sharing / Theme Tools: update social icons to use single SVGs instead of icon font or SVG sprite
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
The Jetpack plugin currently ships with 3 versions of elements of https://github.com/Automattic/social-logos :
- One is added as a npm dependency: it is used in our React-powered interfaces (Jetpack Dashboard > SEO Tools / the post editor) https://github.com/Automattic/jetpack/blob/eb5dc637d0bec1cd195ea99171e309de2d6398a5/projects/plugins/jetpack/package.json#L103
- The other is a direct copy of the icon font only:
- https://github.com/Automattic/jetpack/tree/eb5dc637d0bec1cd195ea99171e309de2d6398a5/projects/plugins/jetpack/_inc/social-logos
- https://github.com/Automattic/jetpack/blob/eb5dc637d0bec1cd195ea99171e309de2d6398a5/projects/plugins/jetpack/_inc/social-logos.php
- The third one is a copy of the SVG sprite, used for both the Social Icons Widget and the Social Menus theme tool: https://github.com/Automattic/jetpack/blob/eb5dc637d0bec1cd195ea99171e309de2d6398a5/projects/plugins/jetpack/modules/theme-tools/social-menu/social-menu.svg
While this works today, it has a few inconvenients:
1. This complexity makes adding a new logo a multi-step process: add the logo in the source repo, release a new version of the package, start using the package in the Jetpack plugin, update the SVG sprite in the Jetpack plugin, update the icon font in the Jetpack plugin. This, of course, assuming the source repo tooling works in our favor (right now it doesn't, due to https://github.com/Automattic/social-logos/issues/116 )
3. The icon font is problematic for display, and can cause issues in some scenarios: #6076, #13201, and #7148 are good examples.
4. Relying on the SVG sprite in the Social Menu outputs all the SVGs on sites that may only need to display a few: #16673
As part of #27817, maybe we could switch all our implementations to one single npm dependency and single SVGs that would be used when necessary. cc @davemart-in
-----------
Issues that could be closed if this were addressed:
- #6076
- #13708
- #13201
Contributor guide
Research direction
Start with projects/plugins/jetpack/package.json, _inc/social-logos, _inc/social-logos.php, and modules/theme-tools/social-menu/social-menu.svg, then review the related implementations under #27817. The work is done when the React interfaces, icon-based implementation, Social Icons Widget, and Social Menus use one dependency and single SVGs without the current duplicated font and sprite assets.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php, react
- Domain
- frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100