Skip to content

Instantly share code, notes, and snippets.

@thiagopnts

thiagopnts/react-svgs.js

Created May 12, 2017 19:00
Show Gist options
  • Save thiagopnts/3c0bc0e06afcf32d9dea7881c9f80fe2 to your computer and use it in GitHub Desktop.
Save thiagopnts/3c0bc0e06afcf32d9dea7881c9f80fe2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
react-svgs.js
let MutedVolumeIcon = () => <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20.219 14.182" style="enable-background:new 0 0 20.219 14.182;" xmlSpace="preserve">
<g>
<path fill="currentColor" d="M11.885,10.627V7.186v0.006v-0.02v0.004V3.736l0,0V2.604l0,0V0.182h-1l-4,4h-3c-0.55,0-1,0.449-1,1
v4c0,0.549,0.45,1,1,1h3l4,4h1V11.76l0,0V10.627L11.885,10.627z"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_2_">
<use xlinkHref="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_4_">
<use xlinkHref="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_7_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_6_">
<use xlinkHref="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_11_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_8_">
<use xlinkHref="#SVGID_11_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_13_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_10_">
<use xlinkHref="#SVGID_13_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_17_" x="-677.281" y="-349.079" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_12_">
<use xlinkHref="#SVGID_17_" style="overflow:visible;"/>
</clipPath>
</g>
</svg>;
let VolumeIcon = () => <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20.219 14.182" style="enable-background:new 0 0 20.219 14.182;" xmlSpace="preserve">
<g>
<path fill="currentColor" d="M18.885,7.182c0-2.762-2.238-5-5-5v1c2.209,0,4,1.791,4,4c0,2.209-1.791,4-4,4v1
C16.647,12.182,18.885,9.941,18.885,7.182z"/>
<path fill="currentColor" d="M11.885,10.627V7.186v0.006V7.172v0.004v-3.44l0,0V2.604l0,0V0.182h-1l-4,4h-3c-0.55,0-1,0.449-1,1
v4c0,0.549,0.45,1,1,1h3l4,4h1V11.76l0,0V10.627L11.885,10.627z"/>
<path fill="currentColor" d="M15.885,7.182c0-1.105-0.895-2-2-2v4C14.991,9.182,15.885,8.285,15.885,7.182z"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_2_">
<use xlinkHref="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_4_">
<use xlinkHref="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_7_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_6_">
<use xlinkHref="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_11_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_8_">
<use xlinkHref="#SVGID_11_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_13_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_10_">
<use xlinkHref="#SVGID_13_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_17_" x="-468.281" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_12_">
<use xlinkHref="#SVGID_17_" style="overflow:visible;"/>
</clipPath>
</g>
</svg>
let PlayButton = () => (<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
<path fill="currentColor" d="M1.425.35L14.575 8l-13.15 7.65V.35z"/>
</svg>);
let PauseButton = () => (<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M1.712 14.76H6.43V1.24H1.71v13.52zm7.86-13.52v13.52h4.716V1.24H9.573z"/>
</svg>);
let FullscreenExitIcon = () => <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 14.402 14.625" style="enable-background:new 0 0 14.402 14.625;" xmlSpace="preserve">
<g>
<path fill="currentColor" d="M1.599,5.882h4.333V1.549l-1.86,1.86L1.345,0.682L0.732,1.295l2.727,2.727L1.599,5.882z
M1.345,13.682l2.727-2.727l1.86,1.86V8.481H1.599l1.86,1.861l-2.727,2.726L1.345,13.682z M13.12,13.682l0.613-0.613l-2.727-2.726
l1.86-1.861H8.532v4.333l1.86-1.86L13.12,13.682z M12.866,5.882l-1.86-1.86l2.727-2.727L13.12,0.682l-2.727,2.727l-1.86-1.86v4.333
H12.866z"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_2_">
<use xlinkHref="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_4_">
<use xlinkHref="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_7_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_6_">
<use xlinkHref="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_11_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_8_">
<use xlinkHref="#SVGID_11_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_13_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_10_">
<use xlinkHref="#SVGID_13_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_17_" x="-680.189" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_12_">
<use xlinkHref="#SVGID_17_" style="overflow:visible;"/>
</clipPath>
</g>
</svg>
let FullscreenIcon = () => <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 14.402 14.625" style="enable-background:new 0 0 14.402 14.625;" xmlSpace="preserve">
<g>
<path fill="currentColor" d="M5.066,0.682H0.732v4.333l1.86-1.86L5.32,5.882l0.613-0.613L3.205,2.542L5.066,0.682z M5.32,8.481
l-2.727,2.727l-1.86-1.86v4.333h4.333l-1.86-1.861l2.727-2.726L5.32,8.481z M9.145,8.481L8.532,9.095l2.727,2.726l-1.86,1.861
h4.333V9.349l-1.86,1.86L9.145,8.481z M9.399,0.682l1.86,1.86L8.532,5.269l0.613,0.613l2.727-2.727l1.86,1.86V0.682H9.399z"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_2_">
<use xlinkHref="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_4_">
<use xlinkHref="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_7_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_6_">
<use xlinkHref="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_11_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_8_">
<use xlinkHref="#SVGID_11_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_13_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_10_">
<use xlinkHref="#SVGID_13_" style="overflow:visible;"/>
</clipPath>
</g>
<g>
<defs>
<rect id="SVGID_17_" x="-621.704" y="-293.045" width="1024" height="1024"/>
</defs>
<clipPath id="SVGID_12_">
<use xlinkHref="#SVGID_17_" style="overflow:visible;"/>
</clipPath>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment