CodeDay Chakra UI Workshop Project Icons

arrow-right.tsx

import { Icon, IconProps } from '@chakra-ui/react';

const ArrowRight = (props: IconProps) => (
  <Icon {...props} viewBox='0 0 14 14'>
    <path
      d='M7.68364 6.99999L4.79614 4.11249L5.62098 3.28766L9.33331 6.99999L5.62098 10.7123L4.79614 9.88749L7.68364 6.99999Z'
      fill='currentColor'
    />
  </Icon>
);

export default ArrowRight;

brand colors

brand: {
  50: '#FFECEC',
  100: '#FFCECF',
  200: '#FFB0B2',
  300: '#FF9496',
  400: '#FF7A7C',
  500: '#F76264',
  600: '#D54B4D',
  700: '#A93739',
  800: '#752425',
  900: '#3C1212',
},

codeday.tsx

import { Icon, IconProps } from '@chakra-ui/react';

const CodeDay = (props: IconProps) => (
  <Icon {...props} viewBox='0 0 40 38'>
    <g clipPath='url(#clip0_802_9317)'>
      <path
        d='M8.74859 20.4481L6.19041 22.7649C6.10932 22.8392 6.04476 22.9285 6.00065 23.0276C5.95652 23.1267 5.93378 23.2333 5.93378 23.341C5.93378 23.4487 5.95652 23.5554 6.00065 23.6545C6.04476 23.7536 6.10932 23.8429 6.19041 23.9172C7.57405 25.2008 9.66132 26.9677 9.66132 26.9677C9.66132 26.9677 15.6359 32.0057 18.2159 35.5746L19.6886 37.6129C19.7655 37.7194 19.8682 37.8063 19.9879 37.8656C20.1075 37.9252 20.2406 37.9555 20.3751 37.9541C20.5099 37.9528 20.642 37.9197 20.7604 37.8577C20.8788 37.7957 20.9795 37.707 21.054 37.5989L22.4777 35.5273C24.9668 31.9094 31.065 26.7015 31.065 26.7015C31.065 26.7015 32.9086 25.1255 34.1868 23.9557C34.2688 23.8802 34.3339 23.7893 34.3779 23.6885C34.4217 23.5878 34.4435 23.4792 34.4421 23.3699C34.4404 23.2607 34.4155 23.153 34.3688 23.0533C34.3221 22.9537 34.2546 22.8645 34.1704 22.7912L31.5704 20.5147C31.4151 20.3788 31.2117 20.3051 31.0019 20.3086C30.792 20.3122 30.5915 20.3928 30.4413 20.5339L20.8595 29.4998C20.7061 29.6426 20.501 29.7222 20.2877 29.7222C20.0744 29.7222 19.8693 29.6426 19.7159 29.4998L9.88496 20.4516C9.73183 20.3114 9.5288 20.2329 9.3175 20.2322C9.1062 20.2315 8.90263 20.3089 8.74859 20.4481Z'
        fill='currentColor'
      />
      <path
        d='M10.3204 0.119097C7.55506 0.420345 4.99368 1.66703 3.10164 3.63263C1.20959 5.59825 0.112427 8.15236 0.0094959 10.8309C-0.132322 14.785 1.05495 17.7777 2.92768 20.3344C2.96024 20.3796 3.00255 20.4174 3.05171 20.4454C3.1009 20.4734 3.15577 20.4908 3.21257 20.4965C3.26939 20.5021 3.32679 20.4958 3.38086 20.4782C3.43493 20.4605 3.48439 20.4317 3.52586 20.3939L6.74586 17.473C6.81313 17.4133 6.85651 17.3328 6.86848 17.2454C6.88044 17.158 6.86021 17.0694 6.81132 16.995C5.70566 15.3494 5.12824 13.4265 5.15131 11.4666C5.15421 9.74375 5.86631 8.09236 7.13148 6.87449C8.39666 5.6566 10.1117 4.97163 11.9004 4.9698C13.3209 5.01261 14.6981 5.4505 15.8659 6.23063C16.3531 6.58086 17.2531 7.29708 17.8659 7.79265C17.9238 7.83939 17.9944 7.8692 18.0693 7.87858C18.1442 7.88797 18.2204 7.87653 18.2888 7.84561C18.3571 7.8147 18.415 7.76558 18.4553 7.70408C18.4959 7.64258 18.5171 7.57122 18.5168 7.49846V2.11192C18.5171 2.01692 18.4808 1.92519 18.415 1.8545C17.9495 1.36066 15.8168 -0.481549 10.3204 0.119097Z'
        fill='currentColor'
      />
      <path
        d='M29.6015 0.119066C32.3668 0.420315 34.9283 1.667 36.8203 3.6326C38.7123 5.59822 39.8095 8.15233 39.9124 10.8309C40.0561 14.785 38.8688 17.7777 37.0033 20.3344C36.9708 20.3795 36.9284 20.4174 36.8793 20.4454C36.8301 20.4734 36.7753 20.4907 36.7184 20.4965C36.6617 20.5021 36.6043 20.4958 36.5503 20.4781C36.4961 20.4604 36.4466 20.4317 36.4052 20.3939L33.1761 17.473C33.1097 17.4127 33.067 17.3323 33.055 17.2452C33.0432 17.1581 33.0628 17.0697 33.1106 16.9949C34.217 15.3498 34.7946 13.4266 34.7706 11.4665C34.7683 9.7439 34.0564 8.09249 32.7917 6.87456C31.5268 5.65664 29.8119 4.9716 28.0234 4.96977C26.6028 5.01258 25.2257 5.45047 24.0579 6.2306C23.5706 6.58083 22.6706 7.29705 22.0579 7.79262C21.9999 7.83936 21.9294 7.86917 21.8544 7.87855C21.7795 7.88794 21.7034 7.8765 21.635 7.84558C21.5666 7.81467 21.5088 7.76555 21.4684 7.70405C21.4279 7.64255 21.4066 7.57119 21.407 7.49843V2.11189C21.4064 2.01654 21.4435 1.92453 21.5106 1.85447C21.9743 1.36063 24.1124 -0.481579 29.6015 0.119066Z'
        fill='currentColor'
      />
      <path
        d='M36.7558 35.0966C36.7696 35.55 36.6423 35.997 36.3905 36.3804C36.1387 36.7637 35.7736 37.0659 35.3421 37.2481C34.9109 37.4302 34.4329 37.4841 33.9694 37.4027C33.5062 37.3214 33.0785 37.1087 32.7416 36.7917C32.4047 36.4746 32.1738 36.068 32.0783 35.6237C31.9831 35.1794 32.0278 34.7178 32.2067 34.2982C32.3856 33.8787 32.6907 33.52 33.0827 33.2686C33.4747 33.0171 33.9358 32.884 34.4067 32.8866C34.7121 32.881 35.0158 32.9341 35.2998 33.0425C35.584 33.1509 35.8427 33.3127 36.0612 33.5183C36.2798 33.7239 36.4538 33.9694 36.573 34.2403C36.6923 34.5112 36.7543 34.8024 36.7558 35.0966ZM32.6303 35.0966C32.6227 35.3269 32.6634 35.5563 32.7502 35.771C32.8369 35.9856 32.9676 36.1813 33.1347 36.346C33.3018 36.5108 33.5016 36.6415 33.7223 36.7301C33.9432 36.8187 34.1803 36.8635 34.4194 36.8618C34.6547 36.861 34.8876 36.8146 35.104 36.7255C35.3203 36.6364 35.5158 36.5063 35.6791 36.3429C35.8421 36.1795 35.9696 35.9863 36.0536 35.7746C36.1378 35.5629 36.1769 35.3372 36.1685 35.1106C36.1685 34.1264 35.4267 33.3314 34.4067 33.3314C34.1689 33.3321 33.9334 33.3785 33.7145 33.4682C33.4956 33.5577 33.2976 33.6887 33.132 33.8531C32.9663 34.0177 32.8367 34.2124 32.7505 34.4261C32.6643 34.6395 32.6236 34.8675 32.6303 35.0966ZM34.0431 36.2558H33.5103V34.0459C33.8014 33.9962 34.0967 33.9734 34.3921 33.9776C34.6683 33.9561 34.9452 34.0126 35.1885 34.1405C35.2616 34.1998 35.3198 34.2742 35.3589 34.3581C35.398 34.4422 35.4167 34.5336 35.414 34.6255C35.4038 34.7493 35.3518 34.8665 35.2656 34.9588C35.1796 35.0512 35.0643 35.1137 34.9376 35.1369V35.1631C35.0516 35.2083 35.1507 35.2822 35.2247 35.3771C35.2987 35.472 35.3445 35.5845 35.3576 35.7025C35.38 35.8948 35.4367 36.082 35.5249 36.2558H34.9521C34.8632 36.086 34.802 35.9042 34.7703 35.7165C34.7285 35.4731 34.5885 35.3663 34.294 35.3663H34.0431V36.2558ZM34.0558 35.002H34.3085C34.6012 35.002 34.8394 34.9075 34.8394 34.6781C34.8394 34.4767 34.6849 34.3418 34.3503 34.3418C34.2514 34.3404 34.1527 34.3492 34.0558 34.3681V35.002Z'
        fill='currentColor'
      />
    </g>
    <defs>
      <clipPath id='clip0_802_9317'>
        <rect width='40' height='38' fill='white' />
      </clipPath>
    </defs>
  </Icon>
);

export default CodeDay;