Social Icons: Adds Patreon, Telegram, Tiktok

Adds the icons for Pateron, Telegram, and Tiktok Closes: #25008, #24572, #21701
WordPress · Oct 14, 2020 · 62190dc · 62190dc
1 parent 0bf25d7
commit 62190dc
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 0 deletions.
diff --git a/packages/block-library/src/social-link/icons/index.js b/packages/block-library/src/social-link/icons/index.js
@@ -22,13 +22,16 @@ export * from './mail';
 export * from './mastodon';
 export * from './meetup';
 export * from './medium';
+export * from './patreon';
 export * from './pinterest';
 export * from './pocket';
 export * from './reddit';
 export * from './skype';
 export * from './snapchat';
 export * from './soundcloud';
 export * from './spotify';
+export * from './telegram';
+export * from './tiktok';
 export * from './tumblr';
 export * from './twitch';
 export * from './twitter';

diff --git a/packages/block-library/src/social-link/icons/patreon.js b/packages/block-library/src/social-link/icons/patreon.js
@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { Circle, Rect, SVG } from '@wordpress/primitives';
+
+export const PatreonIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 569 546" version="1.1">
+		<Circle cx="363" cy="205" r="205" />
+		<Rect width="100" height="546" x="0" y="0" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/icons/telegram.js b/packages/block-library/src/social-link/icons/telegram.js
diff --git a/packages/block-library/src/social-link/icons/tiktok.js b/packages/block-library/src/social-link/icons/tiktok.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const TiktokIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 32 32" version="1.1">
+		<Path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -108,6 +108,11 @@
 	color: #fff;
 }
 
+.wp-social-link-patreon {
+	background-color: #ff424d;
+	color: #fff;
+}
+
 .wp-social-link-pinterest {
 	background-color: #e60122;
 	color: #fff;
@@ -144,6 +149,16 @@
 	color: #fff;
 }
 
+.wp-social-link-telegram {
+	background-color: #2aabee;
+	color: #fff;
+}
+
+.wp-social-link-tiktok {
+	background-color: #000;
+	color: #fff;
+}
+
 .wp-social-link-tumblr {
 	background-color: #011835;
 	color: #fff;

diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -82,6 +82,10 @@
 	color: #f6405f;
 }
 
+.wp-social-link-patreon {
+	color: #ff424d;
+}
+
 .wp-social-link-pinterest {
 	color: #e60122;
 }
@@ -111,6 +115,14 @@
 	color: #1bd760;
 }
 
+.wp-social-link-telegram {
+	color: #2aabee;
+}
+
+.wp-social-link-tiktok {
+	color: #000;
+}
+
 .wp-social-link-tumblr {
 	color: #011835;
 }

diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
@@ -26,13 +26,16 @@ import {
 	MastodonIcon,
 	MeetupIcon,
 	MediumIcon,
+	PatreonIcon,
 	PinterestIcon,
 	PocketIcon,
 	RedditIcon,
 	SkypeIcon,
 	SnapchatIcon,
 	SoundCloudIcon,
 	SpotifyIcon,
+	TelegramIcon,
+	TiktokIcon,
 	TumblrIcon,
 	TwitchIcon,
 	TwitterIcon,
@@ -197,6 +200,12 @@ const variations = [
 		title: 'Medium',
 		icon: MediumIcon,
 	},
+	{
+		name: 'patreon',
+		attributes: { service: 'patreon' },
+		title: 'Patreon',
+		icon: PatreonIcon,
+	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest' },
@@ -239,6 +248,18 @@ const variations = [
 		title: 'Spotify',
 		icon: SpotifyIcon,
 	},
+	{
+		name: 'telegram',
+		attributes: { service: 'telegram' },
+		title: 'Telegram',
+		icon: TelegramIcon,
+	},
+	{
+		name: 'tiktok',
+		attributes: { service: 'tiktok' },
+		title: 'Tiktok',
+		icon: TiktokIcon,
+	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr' },