Automattic / Automattic/jetpack

Sharing / Theme Tools: update social icons to use single SVGs instead of icon font or SVG sprite

Open
#28,861 7 comments 0 reactions 0 assignees View on GitHub
[Feature] Extra Sidebar Widgets [Feature] Sharing [Feature] Theme Tools [Focus] Blocks [Plugin] Jetpack [Plugin] Social [Pri] Normal [Tools] Monorepo Setup Admin Page Enhancement Epic
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.