Don't ignore React files

projects/js-packages/social-logos/.gitignore

@@ -1,3 +1,4 @@
 vendor/
 node_modules/
-build/
+build/*
+!build/react

projects/js-packages/social-logos/build/react/example.css

@@ -0,0 +1,135 @@
+html {
+  color: #767676;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  line-height: 1.15;
+}
+
+a:link, a:visited {
+  color: #999;
+}
+
+a:active {
+  color: #1fc1ad;
+}
+
+h1 {
+  text-align: center;
+  font-size: 24pt;
+}
+
+.social-logos-example > p {
+  text-align: center;
+  margin-bottom: 2em;
+}
+
+.social-logos-example {
+  max-width: 900px;
+  margin: 100px auto;
+}
+
+[type=checkbox] {
+  margin: 0;
+}
+
+.icons {
+  padding: 0 20px;
+  overflow: hidden;
+  margin-bottom: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.icons div {
+  width: 64px;
+  height: 64px;
+  float: left;
+  padding: 6px 2px;
+  position: relative;
+  font-size: 7pt;
+  cursor: pointer;
+  text-align: center;
+}
+
+.icons div p {
+  margin: 0;
+  color: #767676;
+  text-align: center;
+  overflow: hidden;
+  max-height: 2.2em;
+  word-break: break-word;
+}
+
+.icons div p.is-hidden {
+  display: none;
+}
+
+
+.icons div:hover svg {
+  fill: #1fc1ad;
+}
+
+.display-control-group {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+
+.display-control {
+  display: flex;
+}
+
+.display-control h4 {
+  margin: 0 10px 0 0;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.switch input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.handle {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid gray;
+  border-radius: 10px;
+  transition: .4s;
+  box-sizing: border-box;
+}
+
+.handle:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 2px;
+  bottom: 2px;
+  background: gray;
+  border-radius: 50%;
+  transition: .4s;
+}
+
+input:checked + .handle {
+  border-color: #3AA662;
+}
+
+input:checked + .handle:before {
+  background: #3AA662;
+  transform: translateX(20px);
+}
+
+input:focus + .handle {
+  box-shadow: 0 0 3px #2196F3;
+}

projects/js-packages/social-logos/build/react/example.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import SocialLogo from './social-logo';
+import { SocialLogoData } from './social-logo-data';
+import './example.css';
+
+/**
+ * An example React component that displays all the social logos.
+ *
+ * @returns {React.Component} The `SocialLogosExample` component.
+ */
+function SocialLogosExample() {
+	const [ useSmallIcons, setUseSmallIcons ] = useState( false );
+	const [ showIconNames, setShowIconNames ] = useState( true );
+
+	const iconSize = useSmallIcons ? 24 : 48;
+
+	const handleClick = name => {
+		const code = `<SocialLogo icon="${ name }" size="${ iconSize }" />`;
+		window.prompt( 'Copy component code:', code );
+	};
+
+	const handleSmallIconsToggle = e => {
+		setUseSmallIcons( e.target.checked );
+	};
+
+	const handleIconNamesToggle = e => {
+		setShowIconNames( e.target.checked );
+	};
+
+	const allSocialLogos = SocialLogoData.map( logo => {
+		return (
+			<div key={ logo.name }>
+				<SocialLogo
+					icon={ logo.name }
+					size={ iconSize }
+					onClick={ handleClick.bind( this, logo.name ) }
+				/>
+				{ showIconNames && <p>{ logo.name }</p> }
+			</div>
+		);
+	} );
+
+	return (
+		<div className="social-logos-example">
+			<h1>Social Logos</h1>
+
+			<div className="display-control-group">
+				<div className="display-control">
+					<h4>Small icons</h4>
+					<label className="switch">
+						<input type="checkbox" onChange={ handleSmallIconsToggle } checked={ useSmallIcons } />
+						<span className="handle"></span>
+					</label>
+				</div>
+				<div className="display-control">
+					<h4>Icon names</h4>
+					<label className="switch">
+						<input type="checkbox" onChange={ handleIconNamesToggle } checked={ showIconNames } />
+						<span className="handle"></span>
+						<span className="switch-label" data-on="On" data-off="Off"></span>
+					</label>
+				</div>
+			</div>
+
+			<div className="icons">{ allSocialLogos }</div>
+
+			<p>
+				<a href="https://github.com/Automattic/social-logos">GitHub</a>
+			</p>
+		</div>
+	);
+}
+
+export default SocialLogosExample;

projects/js-packages/social-logos/build/react/index.jsx

@@ -0,0 +1,5 @@
+/**
+ * Export components.
+ */
+export { default } from './social-logo';
+export { SocialLogoData } from './social-logo-data';