Star item 

  •         {% include "@Components/items/star-item/star-item.twig"%}

      
  •           <div class="i-star">
  <span class="icon">
  <svg id="Interface_Essential_star-favorite" data-name="Interface, Essential/star-favorite" xmlns="http://www.w3.org/2000/svg" width="16.885" height="16" viewBox="0 0 16.885 16">
    <g id="Group" transform="translate(0 0)">
        <g id="Path" transform="translate(0 0)" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4.65,15.848a1.333,1.333,0,0,1-1.929-1.415l.719-4.121L.413,7.412a1.333,1.333,0,0,1,.735-2.285l4.2-.6L7.248.741a1.333,1.333,0,0,1,2.389,0l1.9,3.785,4.2.6a1.333,1.333,0,0,1,.735,2.285l-3.027,2.9.719,4.122a1.333,1.333,0,0,1-1.929,1.415l-3.792-1.96Z" stroke="none"/>
        <path d="M 12.62884330749512 14.36411190032959 L 11.96703624725342 10.5699462890625 C 11.88116645812988 10.07766628265381 12.04608631134033 9.574946403503418 12.40688610076904 9.229196548461914 L 15.18843078613281 6.563623905181885 L 11.32179641723633 6.0108962059021 C 10.83511638641357 5.941326141357422 10.41342639923096 5.637686252593994 10.19310569763184 5.19818639755249 L 8.442336082458496 1.705652475357056 L 6.691565990447998 5.19818639755249 C 6.471246242523193 5.637686252593994 6.049556255340576 5.941326141357422 5.562876224517822 6.0108962059021 L 1.696240782737732 6.563614368438721 L 4.477786064147949 9.229196548461914 C 4.838595867156982 9.574966430664062 5.00351619720459 10.0777063369751 4.917625904083252 10.56999588012695 L 4.255815029144287 14.36330127716064 L 7.753956317901611 12.55642604827881 C 8.185853958129883 12.33333587646484 8.699095726013184 12.33338451385498 9.130955696105957 12.55655670166016 L 12.62884330749512 14.36411190032959 M 12.85103702545166 16.00000190734863 C 12.64016532897949 16.00000762939453 12.42848968505859 15.95003414154053 12.23433589935303 15.84868621826172 L 8.442336082458496 13.88914680480957 L 4.650336265563965 15.84780597686768 C 4.19989538192749 16.08292770385742 3.654965877532959 16.04152679443359 3.245216131210327 15.74105644226074 C 2.835466146469116 15.44058609008789 2.632166147232056 14.93330669403076 2.721006155014038 14.43301677703857 L 3.439946174621582 10.31219673156738 L 0.4130960702896118 7.41153621673584 C 0.04311608150601387 7.058706283569336 -0.09247391670942307 6.525356292724609 0.06407608091831207 6.038666248321533 C 0.2206260859966278 5.551976203918457 0.6417360901832581 5.197696208953857 1.148036122322083 5.126736164093018 L 5.350615978240967 4.525986194610596 L 7.247946262359619 0.7410863637924194 C 7.472906112670898 0.2871663570404053 7.935726165771484 -3.643188392743468e-06 8.442336082458496 -3.643188392743468e-06 C 8.948945999145508 -3.643188392743468e-06 9.411766052246094 0.2871663570404053 9.636726379394531 0.7410863637924194 L 11.53405570983887 4.525986194610596 L 15.7366361618042 5.126736164093018 C 16.24293518066406 5.197696208953857 16.6640453338623 5.551976203918457 16.82059669494629 6.038666248321533 C 16.97714614868164 6.525356292724609 16.84155654907227 7.058706283569336 16.47157669067383 7.41153621673584 L 13.44472599029541 10.31219673156738 L 14.16366577148438 14.43390655517578 C 14.25250625610352 14.93419647216797 14.0492057800293 15.44147682189941 13.63945579528809 15.74194622039795 C 13.40632057189941 15.91290473937988 13.12939167022705 15.99999523162842 12.85103702545166 16.00000190734863 Z" stroke="none" fill="#f5ac21"/>
        </g>
    </g>

    <g id="half-star" class="half-star" data-name="half-star" transform="translate(-176.027 -11456.742)">
        <g id="Interface_Essential_star-favorite" data-name="Interface, Essential/star-favorite" transform="translate(176.027 11456.752)">
        <g id="Group" transform="translate(0 0)">
        <g id="Path" transform="translate(0 0)" fill="#f5ac21" stroke-linecap="round" stroke-linejoin="round">
            <path d="M 4.033641815185547 15.24911499023438 C 3.908691883087158 15.24911499023438 3.789421796798706 15.21008491516113 3.688721895217896 15.13624477386475 C 3.508151769638062 15.00383472442627 3.420301914215088 14.78461456298828 3.459451913833618 14.5641450881958 L 4.178791999816895 10.44109535217285 L 4.247501850128174 10.04728507995605 L 3.958871841430664 9.770694732666016 L 0.9320218563079834 6.870045185089111 C 0.7699518799781799 6.715475082397461 0.7100218534469604 6.479784965515137 0.7780418992042542 6.268324851989746 C 0.8460618853569031 6.056865215301514 1.032151937484741 5.900304794311523 1.252141833305359 5.8694748878479 L 5.456741809844971 5.268435001373291 L 5.845221996307373 5.212904930114746 L 6.021081924438477 4.862084865570068 L 7.70478630065918 1.503354549407959 C 7.707663536071777 3.335547208786011 7.702434062957764 6.546094417572021 7.698271751403809 9.100555419921875 C 7.695603847503662 10.74216556549072 7.693058490753174 12.30417346954346 7.69246244430542 13.43232822418213 L 4.30614185333252 15.18144512176514 C 4.22033166885376 15.22622489929199 4.127091884613037 15.24911499023438 4.033641815185547 15.24911499023438 Z" stroke="none"/>
            <path d="M 4.255820274353027 14.36329460144043 L 6.942785739898682 12.97541236877441 C 6.943715572357178 11.89992141723633 6.945947170257568 10.52985286712646 6.948271751403809 9.099334716796875 C 6.950533390045166 7.710264205932617 6.953115463256836 6.124461650848389 6.954545497894287 4.673583984375 L 6.691561698913574 5.198194980621338 C 6.47124195098877 5.63768482208252 6.049551963806152 5.941325187683105 5.562871932983398 6.010894775390625 L 1.696238160133362 6.563613891601562 L 4.477791786193848 9.229194641113281 C 4.838602066040039 9.57496452331543 5.003521919250488 10.07770538330078 4.917632102966309 10.57000541687012 L 4.255820274353027 14.36329460144043 M 4.033639907836914 15.99911212921143 C 3.755254745483398 15.99911212921143 3.47837233543396 15.91203212738037 3.245211839675903 15.74105453491211 C 2.835461854934692 15.44058513641357 2.632171869277954 14.93330478668213 2.721001863479614 14.43302536010742 L 3.43995189666748 10.31219482421875 L 0.4131018817424774 7.411544799804688 C 0.04312188178300858 7.058704853057861 -0.09247811883687973 6.525354862213135 0.064071886241436 6.038664817810059 C 0.2206218838691711 5.551974773406982 0.6417418718338013 5.197694778442383 1.148041844367981 5.126735210418701 L 5.350611686706543 4.525984764099121 L 7.247951984405518 0.7410849928855896 C 7.750251293182373 -0.1289348155260086 8.412308692932129 -0.008045014925301075 8.44233226776123 4.991302375856321e-06 C 8.47236156463623 0.00804499164223671 8.44233226776123 10.20279502868652 8.44233226776123 13.88914489746094 L 4.650331974029541 15.84780502319336 C 4.456206321716309 15.94913482666016 4.244481563568115 15.99911212921143 4.033639907836914 15.99911212921143 Z" stroke="none" fill="#f5ac21"/>
        </g>
        </g>
        </g>
    </g>
</svg>

  </span>
</div>

Star item large 

  •         {% include "@Components/items/star-item/star-item.twig" with {
    props: {
      size:"lg"
    }
  }
%}

      
  •           <div class="i-star">
  <span class="icon  --lg">
  <svg id="Interface_Essential_star-favorite" data-name="Interface, Essential/star-favorite" xmlns="http://www.w3.org/2000/svg" width="16.885" height="16" viewBox="0 0 16.885 16">
    <g id="Group" transform="translate(0 0)">
        <g id="Path" transform="translate(0 0)" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4.65,15.848a1.333,1.333,0,0,1-1.929-1.415l.719-4.121L.413,7.412a1.333,1.333,0,0,1,.735-2.285l4.2-.6L7.248.741a1.333,1.333,0,0,1,2.389,0l1.9,3.785,4.2.6a1.333,1.333,0,0,1,.735,2.285l-3.027,2.9.719,4.122a1.333,1.333,0,0,1-1.929,1.415l-3.792-1.96Z" stroke="none"/>
        <path d="M 12.62884330749512 14.36411190032959 L 11.96703624725342 10.5699462890625 C 11.88116645812988 10.07766628265381 12.04608631134033 9.574946403503418 12.40688610076904 9.229196548461914 L 15.18843078613281 6.563623905181885 L 11.32179641723633 6.0108962059021 C 10.83511638641357 5.941326141357422 10.41342639923096 5.637686252593994 10.19310569763184 5.19818639755249 L 8.442336082458496 1.705652475357056 L 6.691565990447998 5.19818639755249 C 6.471246242523193 5.637686252593994 6.049556255340576 5.941326141357422 5.562876224517822 6.0108962059021 L 1.696240782737732 6.563614368438721 L 4.477786064147949 9.229196548461914 C 4.838595867156982 9.574966430664062 5.00351619720459 10.0777063369751 4.917625904083252 10.56999588012695 L 4.255815029144287 14.36330127716064 L 7.753956317901611 12.55642604827881 C 8.185853958129883 12.33333587646484 8.699095726013184 12.33338451385498 9.130955696105957 12.55655670166016 L 12.62884330749512 14.36411190032959 M 12.85103702545166 16.00000190734863 C 12.64016532897949 16.00000762939453 12.42848968505859 15.95003414154053 12.23433589935303 15.84868621826172 L 8.442336082458496 13.88914680480957 L 4.650336265563965 15.84780597686768 C 4.19989538192749 16.08292770385742 3.654965877532959 16.04152679443359 3.245216131210327 15.74105644226074 C 2.835466146469116 15.44058609008789 2.632166147232056 14.93330669403076 2.721006155014038 14.43301677703857 L 3.439946174621582 10.31219673156738 L 0.4130960702896118 7.41153621673584 C 0.04311608150601387 7.058706283569336 -0.09247391670942307 6.525356292724609 0.06407608091831207 6.038666248321533 C 0.2206260859966278 5.551976203918457 0.6417360901832581 5.197696208953857 1.148036122322083 5.126736164093018 L 5.350615978240967 4.525986194610596 L 7.247946262359619 0.7410863637924194 C 7.472906112670898 0.2871663570404053 7.935726165771484 -3.643188392743468e-06 8.442336082458496 -3.643188392743468e-06 C 8.948945999145508 -3.643188392743468e-06 9.411766052246094 0.2871663570404053 9.636726379394531 0.7410863637924194 L 11.53405570983887 4.525986194610596 L 15.7366361618042 5.126736164093018 C 16.24293518066406 5.197696208953857 16.6640453338623 5.551976203918457 16.82059669494629 6.038666248321533 C 16.97714614868164 6.525356292724609 16.84155654907227 7.058706283569336 16.47157669067383 7.41153621673584 L 13.44472599029541 10.31219673156738 L 14.16366577148438 14.43390655517578 C 14.25250625610352 14.93419647216797 14.0492057800293 15.44147682189941 13.63945579528809 15.74194622039795 C 13.40632057189941 15.91290473937988 13.12939167022705 15.99999523162842 12.85103702545166 16.00000190734863 Z" stroke="none" fill="#f5ac21"/>
        </g>
    </g>

    <g id="half-star" class="half-star" data-name="half-star" transform="translate(-176.027 -11456.742)">
        <g id="Interface_Essential_star-favorite" data-name="Interface, Essential/star-favorite" transform="translate(176.027 11456.752)">
        <g id="Group" transform="translate(0 0)">
        <g id="Path" transform="translate(0 0)" fill="#f5ac21" stroke-linecap="round" stroke-linejoin="round">
            <path d="M 4.033641815185547 15.24911499023438 C 3.908691883087158 15.24911499023438 3.789421796798706 15.21008491516113 3.688721895217896 15.13624477386475 C 3.508151769638062 15.00383472442627 3.420301914215088 14.78461456298828 3.459451913833618 14.5641450881958 L 4.178791999816895 10.44109535217285 L 4.247501850128174 10.04728507995605 L 3.958871841430664 9.770694732666016 L 0.9320218563079834 6.870045185089111 C 0.7699518799781799 6.715475082397461 0.7100218534469604 6.479784965515137 0.7780418992042542 6.268324851989746 C 0.8460618853569031 6.056865215301514 1.032151937484741 5.900304794311523 1.252141833305359 5.8694748878479 L 5.456741809844971 5.268435001373291 L 5.845221996307373 5.212904930114746 L 6.021081924438477 4.862084865570068 L 7.70478630065918 1.503354549407959 C 7.707663536071777 3.335547208786011 7.702434062957764 6.546094417572021 7.698271751403809 9.100555419921875 C 7.695603847503662 10.74216556549072 7.693058490753174 12.30417346954346 7.69246244430542 13.43232822418213 L 4.30614185333252 15.18144512176514 C 4.22033166885376 15.22622489929199 4.127091884613037 15.24911499023438 4.033641815185547 15.24911499023438 Z" stroke="none"/>
            <path d="M 4.255820274353027 14.36329460144043 L 6.942785739898682 12.97541236877441 C 6.943715572357178 11.89992141723633 6.945947170257568 10.52985286712646 6.948271751403809 9.099334716796875 C 6.950533390045166 7.710264205932617 6.953115463256836 6.124461650848389 6.954545497894287 4.673583984375 L 6.691561698913574 5.198194980621338 C 6.47124195098877 5.63768482208252 6.049551963806152 5.941325187683105 5.562871932983398 6.010894775390625 L 1.696238160133362 6.563613891601562 L 4.477791786193848 9.229194641113281 C 4.838602066040039 9.57496452331543 5.003521919250488 10.07770538330078 4.917632102966309 10.57000541687012 L 4.255820274353027 14.36329460144043 M 4.033639907836914 15.99911212921143 C 3.755254745483398 15.99911212921143 3.47837233543396 15.91203212738037 3.245211839675903 15.74105453491211 C 2.835461854934692 15.44058513641357 2.632171869277954 14.93330478668213 2.721001863479614 14.43302536010742 L 3.43995189666748 10.31219482421875 L 0.4131018817424774 7.411544799804688 C 0.04312188178300858 7.058704853057861 -0.09247811883687973 6.525354862213135 0.064071886241436 6.038664817810059 C 0.2206218838691711 5.551974773406982 0.6417418718338013 5.197694778442383 1.148041844367981 5.126735210418701 L 5.350611686706543 4.525984764099121 L 7.247951984405518 0.7410849928855896 C 7.750251293182373 -0.1289348155260086 8.412308692932129 -0.008045014925301075 8.44233226776123 4.991302375856321e-06 C 8.47236156463623 0.00804499164223671 8.44233226776123 10.20279502868652 8.44233226776123 13.88914489746094 L 4.650331974029541 15.84780502319336 C 4.456206321716309 15.94913482666016 4.244481563568115 15.99911212921143 4.033639907836914 15.99911212921143 Z" stroke="none" fill="#f5ac21"/>
        </g>
        </g>
        </g>
    </g>
</svg>

  </span>
</div>

Schema 

    {
  "props": {
    "size": {
      "type": "string",
      "description": "lg"
    }
  }
}