React SVG Icon (study)

Reactを使ったSVGアイコンの試作

by Masaki Moriwaki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.icon-stack {
  position: relative;
}
.rotate-minute-hand {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
.rotate-hour-hand {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation:spin 12s linear infinite;
  -moz-animation:spin 12s linear infinite;
  animation:spin 12s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JavaScript 1.7

var Icon = function (props) {
  return (
    <svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
      <path fill={props.color || "#000000"} d={props.d} />
    </svg>
  );
};

var Image = function (props) {
  return (
    <Icon {...props} d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
  );
};

var Heart = function (props) {
  return (
    <Icon {...props} d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
  );
};

var Ban = function (props) {
  return (
    <svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
      <path fill={props.color || "#000000"} d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
      <path fill={props.color || "#ff0000"} d="M12,0A12,12 0 0,1 24,12A12,12 0 0,1 12,24A12,12 0 0,1 0,12A12,12 0 0,1 12,0M12,2A10,10 0 0,0 2,12C2,14.4 2.85,16.6 4.26,18.33L18.33,4.26C16.6,2.85 14.4,2 12,2M12,22A10,10 0 0,0 22,12C22,9.6 21.15,7.4 19.74,5.67L5.67,19.74C7.4,21.15 9.6,22 12,22Z" />
    </svg>
  );
};

var Loading = function (props) {
  return (
    <svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
      <path fill={props.color || "#000000"} d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" />
      <g stroke={props.color || "#000000"}>
        <line x1="12" y1="13" x2="12" y2="8" strokeWidth="1.5" />
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 12 13" to="360 12 13" dur="12s" repeatCount="indefinite"/>
      </g>
...