diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/publicize/service-icon.js')
| -rw-r--r-- | plugins/jetpack/extensions/blocks/publicize/service-icon.js | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/publicize/service-icon.js b/plugins/jetpack/extensions/blocks/publicize/service-icon.js new file mode 100644 index 00000000..dc5dc392 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/publicize/service-icon.js @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +import { G, Icon, Path, Rect, SVG } from '@wordpress/components'; + +/** + * Module variables + */ +// @TODO: Import those from https://github.com/Automattic/social-logos when that's possible. +// Currently we can't directly import icons from there, because all icons are bundled in a single file. +// This means that to import an icon from there, we'll need to add the entire bundle with all icons to our build. +// In the future we'd want to export each icon in that repo separately, and then import them separately here. +const FacebookIcon = ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Rect x="0" fill="none" width="24" height="24" /> + <G> + <Path d="M20.007 3H3.993C3.445 3 3 3.445 3 3.993v16.013c0 .55.445.994.993.994h8.62v-6.97H10.27V11.31h2.346V9.31c0-2.325 1.42-3.59 3.494-3.59.993 0 1.847.073 2.096.106v2.43h-1.438c-1.128 0-1.346.537-1.346 1.324v1.734h2.69l-.35 2.717h-2.34V21h4.587c.548 0 .993-.445.993-.993V3.993c0-.548-.445-.993-.993-.993z" /> + </G> + </SVG> +); +const TwitterIcon = ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Rect x="0" fill="none" width="24" height="24" /> + <G> + <Path d="M22.23 5.924c-.736.326-1.527.547-2.357.646.847-.508 1.498-1.312 1.804-2.27-.793.47-1.67.812-2.606.996C18.325 4.498 17.258 4 16.078 4c-2.266 0-4.103 1.837-4.103 4.103 0 .322.036.635.106.935-3.41-.17-6.433-1.804-8.457-4.287-.353.607-.556 1.312-.556 2.064 0 1.424.724 2.68 1.825 3.415-.673-.022-1.305-.207-1.86-.514v.052c0 1.988 1.415 3.647 3.293 4.023-.344.095-.707.145-1.08.145-.265 0-.522-.026-.773-.074.522 1.63 2.038 2.817 3.833 2.85-1.404 1.1-3.174 1.757-5.096 1.757-.332 0-.66-.02-.98-.057 1.816 1.164 3.973 1.843 6.29 1.843 7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.53.802-.578 1.497-1.3 2.047-2.124z" /> + </G> + </SVG> +); +const LinkedinIcon = ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Rect x="0" fill="none" width="24" height="24" /> + <G> + <Path d="M19.7 3H4.3C3.582 3 3 3.582 3 4.3v15.4c0 .718.582 1.3 1.3 1.3h15.4c.718 0 1.3-.582 1.3-1.3V4.3c0-.718-.582-1.3-1.3-1.3zM8.34 18.338H5.666v-8.59H8.34v8.59zM7.003 8.574c-.857 0-1.55-.694-1.55-1.548 0-.855.692-1.548 1.55-1.548.854 0 1.547.694 1.547 1.548 0 .855-.692 1.548-1.546 1.548zm11.335 9.764h-2.67V14.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.6 1.086-1.6 2.206v4.248h-2.668v-8.59h2.56v1.174h.036c.357-.675 1.228-1.387 2.527-1.387 2.703 0 3.203 1.78 3.203 4.092v4.71z" /> + </G> + </SVG> +); +const TumblrIcon = ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Rect x="0" fill="none" width="24" height="24" /> + <G> + <Path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zm-5.57 14.265c-2.445.042-3.37-1.742-3.37-2.998V10.6H8.922V9.15c1.703-.615 2.113-2.15 2.21-3.026.006-.06.053-.084.08-.084h1.645V8.9h2.246v1.7H12.85v3.495c.008.476.182 1.13 1.08 1.107.3-.008.698-.094.907-.194l.54 1.6c-.205.297-1.12.642-1.946.657z" /> + </G> + </SVG> +); + +export default ( { serviceName } ) => { + const defaultProps = { + className: `jetpack-publicize-gutenberg-social-icon is-${ serviceName }`, + size: 24, + }; + + switch ( serviceName ) { + case 'facebook': + return <Icon icon={ FacebookIcon } { ...defaultProps } />; + case 'twitter': + return <Icon icon={ TwitterIcon } { ...defaultProps } />; + case 'linkedin': + return <Icon icon={ LinkedinIcon } { ...defaultProps } />; + case 'tumblr': + return <Icon icon={ TumblrIcon } { ...defaultProps } />; + } + + return null; +}; |