content: import React from 'react';
  import styled from 'styled-components';
  
  const Glyph = ({ name }) => {
    switch (name) {
      default:
      case 'gear':
        return (
          <path
            fill="currentColor"
            d="M8.837,0.044c-0.557,-0.059 -1.117,-0.059 -1.674,0l-0.257,2.436c-0.243,0.048 -0.484,0.113 -0.719,0.193l-1.441,-1.981c-0.51,0.227 -0.996,0.507 -1.449,0.836l0.996,2.238c-0.187,0.164 -0.363,0.34 -0.527,0.527l-2.238,-0.996c-0.329,0.453 -0.609,0.939 -0.836,1.449l1.981,1.441c-0.08,0.235 -0.145,0.476 -0.193,0.719l-2.436,0.257c-0.059,0.557 -0.059,1.117 0,1.674l2.436,0.257c0.048,0.243 0.113,0.484 0.193,0.719l-1.981,1.441c0.227,0.51 0.507,0.996 0.836,1.449l2.238,-0.996c0.164,0.187 0.34,0.363 0.527,0.527l-0.996,2.238c0.453,0.329 0.939,0.609 1.449,0.836l1.441,-1.981c0.235,0.08 0.476,0.145 0.719,0.193l0.257,2.436c0.557,0.059 1.117,0.059 1.674,0l0.257,-2.436c0.243,-0.048 0.484,-0.113 0.719,-0.193l1.441,1.981c0.51,-0.227 0.996,-0.507 1.449,-0.836l-0.996,-2.238c0.187,-0.164 0.363,-0.34 0.527,-0.527l2.238,0.996c0.329,-0.453 0.609,-0.939 0.836,-1.449l-1.981,-1.441c0.08,-0.235 0.145,-0.476 0.193,-0.719l2.436,-0.257c0.059,-0.557 0.059,-1.117 0,-1.674l-2.436,-0.257c-0.048,-0.243 -0.113,-0.484 -0.193,-0.719l1.981,-1.441c-0.227,-0.51 -0.507,-0.996 -0.836,-1.449l-2.238,0.996c-0.164,-0.187 -0.34,-0.363 -0.527,-0.527l0.996,-2.238c-0.453,-0.329 -0.939,-0.609 -1.449,-0.836l-1.441,1.981c-0.235,-0.08 -0.476,-0.145 -0.719,-0.193l-0.257,-2.436Zm-0.837,4.352c1.989,0 3.604,1.615 3.604,3.604c0,1.989 -1.615,3.604 -3.604,3.604c-1.989,0 -3.604,-1.615 -3.604,-3.604c0,-1.989 1.615,-3.604 3.604,-3.604Z"
          />
        );
      case 'magnifier':
        return (
          <path
            fill="currentColor"
            d="M9.946,11.203c-1.039,0.778 -2.329,1.239 -3.725,1.239c-3.433,0 -6.221,-2.788 -6.221,-6.221c0,-3.433 2.788,-6.221 6.221,-6.221c3.433,0 6.221,2.788 6.221,6.221c0,1.396 -0.461,2.686 -1.239,3.725l4.453,4.453c0.173,0.173 0.173,0.455 0,0.628l-0.629,0.629c-0.173,0.173 -0.455,0.173 -0.628,0l-4.453,-4.453Zm-3.725,-9.336c2.403,0 4.354,1.951 4.354,4.354c0,2.403 -1.951,4.354 -4.354,4.354c-2.403,0 -4.354,-1.951 -4.354,-4.354c0,-2.403 1.951,-4.354 4.354,-4.354Z"
          />
        );
      case 'star':
        return (
          <path
            fill="currentColor"
            d="M7.284,1.291c0.097,-0.313 0.388,-0.527 0.716,-0.527c0.328,0 0.619,0.214 0.716,0.527l1.346,4.336c0.019,0.06 0.057,0.113 0.108,0.15c0.051,0.037 0.113,0.057 0.176,0.056l4.54,-0.059c0.328,-0.005 0.621,0.205 0.722,0.518c0.102,0.312 -0.012,0.654 -0.28,0.844l-3.707,2.62c-0.052,0.037 -0.09,0.089 -0.11,0.149c-0.019,0.06 -0.019,0.125 0.001,0.184l1.46,4.299c0.105,0.311 -0.004,0.655 -0.27,0.848c-0.265,0.193 -0.626,0.191 -0.889,-0.006l-3.638,-2.716c-0.05,-0.038 -0.112,-0.058 -0.175,-0.058c-0.063,0 -0.125,0.02 -0.175,0.058l-3.638,2.716c-0.263,0.197 -0.624,0.199 -0.889,0.006c-0.266,-0.193 -0.375,-0.537 -0.27,-0.848l1.46,-4.299c0.02,-0.059 0.02,-0.124 0.001,-0.184c-0.02,-0.06 -0.058,-0.112 -0.11,-0.149l-3.707,-2.62c-0.268,-0.19 -0.382,-0.532 -0.28,-0.844c0.101,-0.313 0.394,-0.523 0.722,-0.518l4.54,0.059c0.063,0.001 0.125,-0.019 0.176,-0.056c0.051,-0.037 0.089,-0.09 0.108,-0.15l1.346,-4.336Z"
          />
        );
      case 'clear':
        return (
          <path
            fill="currentColor"
            d="M3,3.758c0.273,-0.317 0.583,-0.731 1,-0.758l10.767,0c0.68,0 1.233,0.553 1.233,1.233l0,7.534c0,0.68 -0.553,1.233 -1.233,1.233l-10.767,0c-0.417,-0.027 -0.727,-0.441 -1,-0.758l-2.704,-3.527c-0.395,-0.394 -0.395,-1.036 0,-1.43l2.704,-3.527Zm6,2.985l1.957,-1.957c0.174,-0.173 0.455,-0.173 0.629,0l0.628,0.628c0.173,0.174 0.173,0.455 0,0.629l-1.957,1.957l1.957,1.957c0.173,0.174 0.173,0.455 0,0.629l-0.628,0.628c-0.174,0.173 -0.455,0.173 -0.629,0l-1.957,-1.957l-1.957,1.957c-0.174,0.173 -0.455,0.173 -0.629,0l-0.628,-0.628c-0.173,-0.174 -0.173,-0.455 0,-0.629l1.957,-1.957l-1.957,-1.957c-0.173,-0.174 -0.173,-0.455 0,-0.629l0.628,-0.628c0.174,-0.173 0.455,-0.173 0.629,0l1.957,1.957Z"
          />
        );
    }
  };
  
  const Icon = styled.svg.attrs(({ glyph }) => ({
    xmlns: 'http://www.w3.org/2000/svg',
    version: '1.1',
    viewBox: '0 0 16 16',
    children: <Glyph name={glyph} />,
  }))`
    fill-rule: evenodd;
    clip-rule: evenodd;
    stroke-linejoin: round;
    width: 16px;
    height: 16px;
  `;
  
  export default Icon;
  