wix-style-react/src/FacesRatingBar/icons/FaceIcons.js

wix-style-react

import { classes } from '../FacesRatingBar.st.css';
import React from 'react';

export const FaceDisapointed = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="currentColor"
      className={classes.faceIcon}
    >
      <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 Z M11,13 C13.1498096,13 14.8000952,13.7334602 15.9,15.2 C16.0656854,15.4209139 16.0209139,15.7343146 15.8,15.9 C15.5790861,16.0656854 15.2656854,16.0209139 15.1,15.8 C14.1999048,14.5998731 12.8501904,14 11,14 C9.14980963,14 7.80009518,14.5998731 6.9,15.8 C6.73431458,16.0209139 6.4209139,16.0656854 6.2,15.9 C5.9790861,15.7343146 5.93431458,15.4209139 6.1,15.2 C7.19990482,13.7334602 8.85019037,13 11,13 Z M13.6981006,7.04082354 L13.7773501,7.08397485 L16.7773501,9.08397485 C17.0071144,9.23715108 17.0692014,9.54758575 16.9160251,9.7773501 C16.7798685,9.98158507 16.5194583,10.0533342 16.3018994,9.95917646 L16.2226499,9.91602515 L13.2226499,7.91602515 C12.9928856,7.76284892 12.9307986,7.45241425 13.0839749,7.2226499 C13.2201315,7.01841493 13.4805417,6.94666581 13.6981006,7.04082354 Z M8.91602515,7.2226499 C9.0521818,7.42688487 9.01825397,7.69485937 8.84766266,7.85946839 L8.7773501,7.91602515 L5.7773501,9.91602515 C5.54758575,10.0692014 5.23715108,10.0071144 5.08397485,9.7773501 C4.9478182,9.57311513 4.98174603,9.30514063 5.15233734,9.14053161 L5.2226499,9.08397485 L8.2226499,7.08397485 C8.45241425,6.93079862 8.76284892,6.99288556 8.91602515,7.2226499 Z" />
    </svg>
  );
};

export const FaceFrowning = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="currentColor"
      className={classes.faceIcon}
    >
      <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 Z M11,13 C13.1498096,13 14.8000952,13.7334602 15.9,15.2 C16.0656854,15.4209139 16.0209139,15.7343146 15.8,15.9 C15.5790861,16.0656854 15.2656854,16.0209139 15.1,15.8 C14.1999048,14.5998731 12.8501904,14 11,14 C9.14980963,14 7.80009518,14.5998731 6.9,15.8 C6.73431458,16.0209139 6.4209139,16.0656854 6.2,15.9 C5.9790861,15.7343146 5.93431458,15.4209139 6.1,15.2 C7.19990482,13.7334602 8.85019037,13 11,13 Z M15,8 C15.5522847,8 16,8.44771525 16,9 C16,9.55228475 15.5522847,10 15,10 C14.4477153,10 14,9.55228475 14,9 C14,8.44771525 14.4477153,8 15,8 Z M7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 Z" />
    </svg>
  );
};

export const FaceNeutral = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="currentColor"
      className={classes.faceIcon}
    >
      <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 Z M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7454599 14.8231248,14.9496084 14.5898756,14.9919443 L14.5,15 L7.5,15 C7.22385763,15 7,14.7761424 7,14.5 C7,14.2545401 7.17687516,14.0503916 7.41012437,14.0080557 L7.5,14 L14.5,14 Z M15,8 C15.5522847,8 16,8.44771525 16,9 C16,9.55228475 15.5522847,10 15,10 C14.4477153,10 14,9.55228475 14,9 C14,8.44771525 14.4477153,8 15,8 Z M7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 Z" />
    </svg>
  );
};

export const FaceSmiling = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="currentColor"
      className={classes.faceIcon}
    >
      <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 Z M15.8,13.1 C16.0209139,13.2656854 16.0656854,13.5790861 15.9,13.8 C14.8000952,15.2665398 13.1498096,16 11,16 C8.85019037,16 7.19990482,15.2665398 6.1,13.8 C5.93431458,13.5790861 5.9790861,13.2656854 6.2,13.1 C6.4209139,12.9343146 6.73431458,12.9790861 6.9,13.2 C7.80009518,14.4001269 9.14980963,15 11,15 C12.8501904,15 14.1999048,14.4001269 15.1,13.2 C15.2656854,12.9790861 15.5790861,12.9343146 15.8,13.1 Z M15,8 C15.5522847,8 16,8.44771525 16,9 C16,9.55228475 15.5522847,10 15,10 C14.4477153,10 14,9.55228475 14,9 C14,8.44771525 14.4477153,8 15,8 Z M7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 Z" />
    </svg>
  );
};

export const FaceGrining = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="currentColor"
      className={classes.faceIcon}
    >
      <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1 C5.4771525,1 1,5.4771525 1,11 C1,16.5228475 5.4771525,21 11,21 C16.5228475,21 21,16.5228475 21,11 C21,5.4771525 16.5228475,1 11,1 Z M14.1008295,13 C14.166379,13.0000139 14.2316957,13.0078126 14.2954025,13.0232457 C14.7389887,13.1307054 15.011473,13.5774163 14.9040134,14.0210025 L14.9040134,14.0210025 L14.8478546,14.2343539 C14.3304649,16.0501362 13.0165924,17 11,17 C8.89840722,17 7.56002282,15.9683741 7.09097297,14.0001364 L7.09097297,14.0001364 L7.07440367,13.9066737 L7.07440367,13.9066737 L7.06885529,13.811916 C7.06885529,13.363498 7.43236988,12.9999835 7.88078784,13 L7.88078784,13 Z M15,8 C15.5522847,8 16,8.44771525 16,9 C16,9.55228475 15.5522847,10 15,10 C14.4477153,10 14,9.55228475 14,9 C14,8.44771525 14.4477153,8 15,8 Z M7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 Z" />
    </svg>
  );
};