Skip to content

Commit

Permalink
✨ Add i, img and svg variants on icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@siguici
siguici committed Aug 23, 2023
1 parent 711bebc commit 46c79b3
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 7 deletions.
19 changes: 18 additions & 1 deletion config/ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,30 @@
],

'icon' => [
'tag' => 'svg',
'attributes' => [
'tag' => 'svg',
'size' => 24,
'width' => 24,
'height' => 24,
'fill' => 'currentColor',
],
'variants' => [
'i' => [
'attributes' => [
'tag' => 'i',
],
],
'img' => [
'attributes' => [
'tag' => 'img',
],
],
'svg' => [
'attributes' => [
'tag' => 'svg',
],
],
],
],

'input' => [
Expand Down
16 changes: 10 additions & 6 deletions tests/Feat/IconTest.php
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<?php

it('should render svg tag', function () {
$this->render('<s-icon tag="svg" name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 6.75C8.25 4.67893 9.92893 3 12 3C14.0711 3 15.75 4.67893 15.75 6.75C15.75 8.82107 14.0711 10.5 12 10.5C9.92893 10.5 8.25 8.82107 8.25 6.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9.75C15.75 8.09315 17.0931 6.75 18.75 6.75C20.4069 6.75 21.75 8.09315 21.75 9.75C21.75 11.4069 20.4069 12.75 18.75 12.75C17.0931 12.75 15.75 11.4069 15.75 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 9.75C2.25 8.09315 3.59315 6.75 5.25 6.75C6.90685 6.75 8.25 8.09315 8.25 9.75C8.25 11.4069 6.90685 12.75 5.25 12.75C3.59315 12.75 2.25 11.4069 2.25 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.30986 15.1175C7.50783 13.2444 9.60835 12 12 12C14.3919 12 16.4927 13.2447 17.6906 15.1182C18.5187 16.4134 18.877 17.9752 18.709 19.4979C18.6827 19.7359 18.5444 19.947 18.3368 20.0662C16.4694 21.1376 14.3051 21.75 12 21.75C9.69492 21.75 7.53059 21.1376 5.66325 20.0662C5.45559 19.947 5.3173 19.7359 5.29103 19.4979C5.12293 17.9749 5.48141 16.4129 6.30986 15.1175Z" fill="currentColor"/><path d="M5.08228 14.2537C5.07024 14.2722 5.05827 14.2907 5.04638 14.3093C4.08091 15.8189 3.63908 17.6167 3.77471 19.389C3.16667 19.2967 2.5767 19.1481 2.01043 18.9487L1.89547 18.9082C1.68576 18.8343 1.53923 18.6439 1.52159 18.4222L1.51192 18.3007C1.50402 18.2014 1.5 18.1011 1.5 18C1.5 15.9851 3.08905 14.3414 5.08228 14.2537Z" fill="currentColor"/><path d="M20.2256 19.389C20.3612 17.617 19.9196 15.8196 18.9545 14.3102C18.9424 14.2913 18.9303 14.2725 18.9181 14.2537C20.9111 14.3416 22.5 15.9853 22.5 18C22.5 18.1011 22.496 18.2014 22.4881 18.3007L22.4784 18.4222C22.4608 18.6439 22.3142 18.8343 22.1045 18.9082L21.9896 18.9487C21.4234 19.1481 20.8336 19.2966 20.2256 19.389Z" fill="currentColor"/></svg>');
it('should render icon component', function () {
$this->render('<s-icon name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 6.75C8.25 4.67893 9.92893 3 12 3C14.0711 3 15.75 4.67893 15.75 6.75C15.75 8.82107 14.0711 10.5 12 10.5C9.92893 10.5 8.25 8.82107 8.25 6.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9.75C15.75 8.09315 17.0931 6.75 18.75 6.75C20.4069 6.75 21.75 8.09315 21.75 9.75C21.75 11.4069 20.4069 12.75 18.75 12.75C17.0931 12.75 15.75 11.4069 15.75 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 9.75C2.25 8.09315 3.59315 6.75 5.25 6.75C6.90685 6.75 8.25 8.09315 8.25 9.75C8.25 11.4069 6.90685 12.75 5.25 12.75C3.59315 12.75 2.25 11.4069 2.25 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.30986 15.1175C7.50783 13.2444 9.60835 12 12 12C14.3919 12 16.4927 13.2447 17.6906 15.1182C18.5187 16.4134 18.877 17.9752 18.709 19.4979C18.6827 19.7359 18.5444 19.947 18.3368 20.0662C16.4694 21.1376 14.3051 21.75 12 21.75C9.69492 21.75 7.53059 21.1376 5.66325 20.0662C5.45559 19.947 5.3173 19.7359 5.29103 19.4979C5.12293 17.9749 5.48141 16.4129 6.30986 15.1175Z" fill="currentColor"/><path d="M5.08228 14.2537C5.07024 14.2722 5.05827 14.2907 5.04638 14.3093C4.08091 15.8189 3.63908 17.6167 3.77471 19.389C3.16667 19.2967 2.5767 19.1481 2.01043 18.9487L1.89547 18.9082C1.68576 18.8343 1.53923 18.6439 1.52159 18.4222L1.51192 18.3007C1.50402 18.2014 1.5 18.1011 1.5 18C1.5 15.9851 3.08905 14.3414 5.08228 14.2537Z" fill="currentColor"/><path d="M20.2256 19.389C20.3612 17.617 19.9196 15.8196 18.9545 14.3102C18.9424 14.2913 18.9303 14.2725 18.9181 14.2537C20.9111 14.3416 22.5 15.9853 22.5 18C22.5 18.1011 22.496 18.2014 22.4881 18.3007L22.4784 18.4222C22.4608 18.6439 22.3142 18.8343 22.1045 18.9082L21.9896 18.9487C21.4234 19.1481 20.8336 19.2966 20.2256 19.389Z" fill="currentColor"/></svg>');
});

it('should render img tag', function () {
$this->render('<s-icon tag="img" name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4yNSA2Ljc1QzguMjUgNC42Nzg5MyA5LjkyODkzIDMgMTIgM0MxNC4wNzExIDMgMTUuNzUgNC42Nzg5MyAxNS43NSA2Ljc1QzE1Ljc1IDguODIxMDcgMTQuMDcxMSAxMC41IDEyIDEwLjVDOS45Mjg5MyAxMC41IDguMjUgOC44MjEwNyA4LjI1IDYuNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1Ljc1IDkuNzVDMTUuNzUgOC4wOTMxNSAxNy4wOTMxIDYuNzUgMTguNzUgNi43NUMyMC40MDY5IDYuNzUgMjEuNzUgOC4wOTMxNSAyMS43NSA5Ljc1QzIxLjc1IDExLjQwNjkgMjAuNDA2OSAxMi43NSAxOC43NSAxMi43NUMxNy4wOTMxIDEyLjc1IDE1Ljc1IDExLjQwNjkgMTUuNzUgOS43NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4yNSA5Ljc1QzIuMjUgOC4wOTMxNSAzLjU5MzE1IDYuNzUgNS4yNSA2Ljc1QzYuOTA2ODUgNi43NSA4LjI1IDguMDkzMTUgOC4yNSA5Ljc1QzguMjUgMTEuNDA2OSA2LjkwNjg1IDEyLjc1IDUuMjUgMTIuNzVDMy41OTMxNSAxMi43NSAyLjI1IDExLjQwNjkgMi4yNSA5Ljc1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjMwOTg2IDE1LjExNzVDNy41MDc4MyAxMy4yNDQ0IDkuNjA4MzUgMTIgMTIgMTJDMTQuMzkxOSAxMiAxNi40OTI3IDEzLjI0NDcgMTcuNjkwNiAxNS4xMTgyQzE4LjUxODcgMTYuNDEzNCAxOC44NzcgMTcuOTc1MiAxOC43MDkgMTkuNDk3OUMxOC42ODI3IDE5LjczNTkgMTguNTQ0NCAxOS45NDcgMTguMzM2OCAyMC4wNjYyQzE2LjQ2OTQgMjEuMTM3NiAxNC4zMDUxIDIxLjc1IDEyIDIxLjc1QzkuNjk0OTIgMjEuNzUgNy41MzA1OSAyMS4xMzc2IDUuNjYzMjUgMjAuMDY2MkM1LjQ1NTU5IDE5Ljk0NyA1LjMxNzMgMTkuNzM1OSA1LjI5MTAzIDE5LjQ5NzlDNS4xMjI5MyAxNy45NzQ5IDUuNDgxNDEgMTYuNDEyOSA2LjMwOTg2IDE1LjExNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNS4wODIyOCAxNC4yNTM3QzUuMDcwMjQgMTQuMjcyMiA1LjA1ODI3IDE0LjI5MDcgNS4wNDYzOCAxNC4zMDkzQzQuMDgwOTEgMTUuODE4OSAzLjYzOTA4IDE3LjYxNjcgMy43NzQ3MSAxOS4zODlDMy4xNjY2NyAxOS4yOTY3IDIuNTc2NyAxOS4xNDgxIDIuMDEwNDMgMTguOTQ4N0wxLjg5NTQ3IDE4LjkwODJDMS42ODU3NiAxOC44MzQzIDEuNTM5MjMgMTguNjQzOSAxLjUyMTU5IDE4LjQyMjJMMS41MTE5MiAxOC4zMDA3QzEuNTA0MDIgMTguMjAxNCAxLjUgMTguMTAxMSAxLjUgMThDMS41IDE1Ljk4NTEgMy4wODkwNSAxNC4zNDE0IDUuMDgyMjggMTQuMjUzN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0yMC4yMjU2IDE5LjM4OUMyMC4zNjEyIDE3LjYxNyAxOS45MTk2IDE1LjgxOTYgMTguOTU0NSAxNC4zMTAyQzE4Ljk0MjQgMTQuMjkxMyAxOC45MzAzIDE0LjI3MjUgMTguOTE4MSAxNC4yNTM3QzIwLjkxMTEgMTQuMzQxNiAyMi41IDE1Ljk4NTMgMjIuNSAxOEMyMi41IDE4LjEwMTEgMjIuNDk2IDE4LjIwMTQgMjIuNDg4MSAxOC4zMDA3TDIyLjQ3ODQgMTguNDIyMkMyMi40NjA4IDE4LjY0MzkgMjIuMzE0MiAxOC44MzQzIDIyLjEwNDUgMTguOTA4MkwyMS45ODk2IDE4Ljk0ODdDMjEuNDIzNCAxOS4xNDgxIDIwLjgzMzYgMTkuMjk2NiAyMC4yMjU2IDE5LjM4OVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==" alt="user group icon" width="24" height="24"/>');
it('should render svg icon', function () {
$this->render('<s-svg-icon name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 6.75C8.25 4.67893 9.92893 3 12 3C14.0711 3 15.75 4.67893 15.75 6.75C15.75 8.82107 14.0711 10.5 12 10.5C9.92893 10.5 8.25 8.82107 8.25 6.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9.75C15.75 8.09315 17.0931 6.75 18.75 6.75C20.4069 6.75 21.75 8.09315 21.75 9.75C21.75 11.4069 20.4069 12.75 18.75 12.75C17.0931 12.75 15.75 11.4069 15.75 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 9.75C2.25 8.09315 3.59315 6.75 5.25 6.75C6.90685 6.75 8.25 8.09315 8.25 9.75C8.25 11.4069 6.90685 12.75 5.25 12.75C3.59315 12.75 2.25 11.4069 2.25 9.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.30986 15.1175C7.50783 13.2444 9.60835 12 12 12C14.3919 12 16.4927 13.2447 17.6906 15.1182C18.5187 16.4134 18.877 17.9752 18.709 19.4979C18.6827 19.7359 18.5444 19.947 18.3368 20.0662C16.4694 21.1376 14.3051 21.75 12 21.75C9.69492 21.75 7.53059 21.1376 5.66325 20.0662C5.45559 19.947 5.3173 19.7359 5.29103 19.4979C5.12293 17.9749 5.48141 16.4129 6.30986 15.1175Z" fill="currentColor"/><path d="M5.08228 14.2537C5.07024 14.2722 5.05827 14.2907 5.04638 14.3093C4.08091 15.8189 3.63908 17.6167 3.77471 19.389C3.16667 19.2967 2.5767 19.1481 2.01043 18.9487L1.89547 18.9082C1.68576 18.8343 1.53923 18.6439 1.52159 18.4222L1.51192 18.3007C1.50402 18.2014 1.5 18.1011 1.5 18C1.5 15.9851 3.08905 14.3414 5.08228 14.2537Z" fill="currentColor"/><path d="M20.2256 19.389C20.3612 17.617 19.9196 15.8196 18.9545 14.3102C18.9424 14.2913 18.9303 14.2725 18.9181 14.2537C20.9111 14.3416 22.5 15.9853 22.5 18C22.5 18.1011 22.496 18.2014 22.4881 18.3007L22.4784 18.4222C22.4608 18.6439 22.3142 18.8343 22.1045 18.9082L21.9896 18.9487C21.4234 19.1481 20.8336 19.2966 20.2256 19.389Z" fill="currentColor"/></svg>');
});

it('should render custom tag', function () {
$this->render('<s-icon tag="i" name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<i style="content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4yNSA2Ljc1QzguMjUgNC42Nzg5MyA5LjkyODkzIDMgMTIgM0MxNC4wNzExIDMgMTUuNzUgNC42Nzg5MyAxNS43NSA2Ljc1QzE1Ljc1IDguODIxMDcgMTQuMDcxMSAxMC41IDEyIDEwLjVDOS45Mjg5MyAxMC41IDguMjUgOC44MjEwNyA4LjI1IDYuNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1Ljc1IDkuNzVDMTUuNzUgOC4wOTMxNSAxNy4wOTMxIDYuNzUgMTguNzUgNi43NUMyMC40MDY5IDYuNzUgMjEuNzUgOC4wOTMxNSAyMS43NSA5Ljc1QzIxLjc1IDExLjQwNjkgMjAuNDA2OSAxMi43NSAxOC43NSAxMi43NUMxNy4wOTMxIDEyLjc1IDE1Ljc1IDExLjQwNjkgMTUuNzUgOS43NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4yNSA5Ljc1QzIuMjUgOC4wOTMxNSAzLjU5MzE1IDYuNzUgNS4yNSA2Ljc1QzYuOTA2ODUgNi43NSA4LjI1IDguMDkzMTUgOC4yNSA5Ljc1QzguMjUgMTEuNDA2OSA2LjkwNjg1IDEyLjc1IDUuMjUgMTIuNzVDMy41OTMxNSAxMi43NSAyLjI1IDExLjQwNjkgMi4yNSA5Ljc1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjMwOTg2IDE1LjExNzVDNy41MDc4MyAxMy4yNDQ0IDkuNjA4MzUgMTIgMTIgMTJDMTQuMzkxOSAxMiAxNi40OTI3IDEzLjI0NDcgMTcuNjkwNiAxNS4xMTgyQzE4LjUxODcgMTYuNDEzNCAxOC44NzcgMTcuOTc1MiAxOC43MDkgMTkuNDk3OUMxOC42ODI3IDE5LjczNTkgMTguNTQ0NCAxOS45NDcgMTguMzM2OCAyMC4wNjYyQzE2LjQ2OTQgMjEuMTM3NiAxNC4zMDUxIDIxLjc1IDEyIDIxLjc1QzkuNjk0OTIgMjEuNzUgNy41MzA1OSAyMS4xMzc2IDUuNjYzMjUgMjAuMDY2MkM1LjQ1NTU5IDE5Ljk0NyA1LjMxNzMgMTkuNzM1OSA1LjI5MTAzIDE5LjQ5NzlDNS4xMjI5MyAxNy45NzQ5IDUuNDgxNDEgMTYuNDEyOSA2LjMwOTg2IDE1LjExNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNS4wODIyOCAxNC4yNTM3QzUuMDcwMjQgMTQuMjcyMiA1LjA1ODI3IDE0LjI5MDcgNS4wNDYzOCAxNC4zMDkzQzQuMDgwOTEgMTUuODE4OSAzLjYzOTA4IDE3LjYxNjcgMy43NzQ3MSAxOS4zODlDMy4xNjY2NyAxOS4yOTY3IDIuNTc2NyAxOS4xNDgxIDIuMDEwNDMgMTguOTQ4N0wxLjg5NTQ3IDE4LjkwODJDMS42ODU3NiAxOC44MzQzIDEuNTM5MjMgMTguNjQzOSAxLjUyMTU5IDE4LjQyMjJMMS41MTE5MiAxOC4zMDA3QzEuNTA0MDIgMTguMjAxNCAxLjUgMTguMTAxMSAxLjUgMThDMS41IDE1Ljk4NTEgMy4wODkwNSAxNC4zNDE0IDUuMDgyMjggMTQuMjUzN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0yMC4yMjU2IDE5LjM4OUMyMC4zNjEyIDE3LjYxNyAxOS45MTk2IDE1LjgxOTYgMTguOTU0NSAxNC4zMTAyQzE4Ljk0MjQgMTQuMjkxMyAxOC45MzAzIDE0LjI3MjUgMTguOTE4MSAxNC4yNTM3QzIwLjkxMTEgMTQuMzQxNiAyMi41IDE1Ljk4NTMgMjIuNSAxOEMyMi41IDE4LjEwMTEgMjIuNDk2IDE4LjIwMTQgMjIuNDg4MSAxOC4zMDA3TDIyLjQ3ODQgMTguNDIyMkMyMi40NjA4IDE4LjY0MzkgMjIuMzE0MiAxOC44MzQzIDIyLjEwNDUgMTguOTA4MkwyMS45ODk2IDE4Ljk0ODdDMjEuNDIzNCAxOS4xNDgxIDIwLjgzMzYgMTkuMjk2NiAyMC4yMjU2IDE5LjM4OVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==);" aria-label="user group icon" width="24" height="24"></i>');
it('should render img icon', function () {
$this->render('<s-img-icon name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4yNSA2Ljc1QzguMjUgNC42Nzg5MyA5LjkyODkzIDMgMTIgM0MxNC4wNzExIDMgMTUuNzUgNC42Nzg5MyAxNS43NSA2Ljc1QzE1Ljc1IDguODIxMDcgMTQuMDcxMSAxMC41IDEyIDEwLjVDOS45Mjg5MyAxMC41IDguMjUgOC44MjEwNyA4LjI1IDYuNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1Ljc1IDkuNzVDMTUuNzUgOC4wOTMxNSAxNy4wOTMxIDYuNzUgMTguNzUgNi43NUMyMC40MDY5IDYuNzUgMjEuNzUgOC4wOTMxNSAyMS43NSA5Ljc1QzIxLjc1IDExLjQwNjkgMjAuNDA2OSAxMi43NSAxOC43NSAxMi43NUMxNy4wOTMxIDEyLjc1IDE1Ljc1IDExLjQwNjkgMTUuNzUgOS43NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4yNSA5Ljc1QzIuMjUgOC4wOTMxNSAzLjU5MzE1IDYuNzUgNS4yNSA2Ljc1QzYuOTA2ODUgNi43NSA4LjI1IDguMDkzMTUgOC4yNSA5Ljc1QzguMjUgMTEuNDA2OSA2LjkwNjg1IDEyLjc1IDUuMjUgMTIuNzVDMy41OTMxNSAxMi43NSAyLjI1IDExLjQwNjkgMi4yNSA5Ljc1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjMwOTg2IDE1LjExNzVDNy41MDc4MyAxMy4yNDQ0IDkuNjA4MzUgMTIgMTIgMTJDMTQuMzkxOSAxMiAxNi40OTI3IDEzLjI0NDcgMTcuNjkwNiAxNS4xMTgyQzE4LjUxODcgMTYuNDEzNCAxOC44NzcgMTcuOTc1MiAxOC43MDkgMTkuNDk3OUMxOC42ODI3IDE5LjczNTkgMTguNTQ0NCAxOS45NDcgMTguMzM2OCAyMC4wNjYyQzE2LjQ2OTQgMjEuMTM3NiAxNC4zMDUxIDIxLjc1IDEyIDIxLjc1QzkuNjk0OTIgMjEuNzUgNy41MzA1OSAyMS4xMzc2IDUuNjYzMjUgMjAuMDY2MkM1LjQ1NTU5IDE5Ljk0NyA1LjMxNzMgMTkuNzM1OSA1LjI5MTAzIDE5LjQ5NzlDNS4xMjI5MyAxNy45NzQ5IDUuNDgxNDEgMTYuNDEyOSA2LjMwOTg2IDE1LjExNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNS4wODIyOCAxNC4yNTM3QzUuMDcwMjQgMTQuMjcyMiA1LjA1ODI3IDE0LjI5MDcgNS4wNDYzOCAxNC4zMDkzQzQuMDgwOTEgMTUuODE4OSAzLjYzOTA4IDE3LjYxNjcgMy43NzQ3MSAxOS4zODlDMy4xNjY2NyAxOS4yOTY3IDIuNTc2NyAxOS4xNDgxIDIuMDEwNDMgMTguOTQ4N0wxLjg5NTQ3IDE4LjkwODJDMS42ODU3NiAxOC44MzQzIDEuNTM5MjMgMTguNjQzOSAxLjUyMTU5IDE4LjQyMjJMMS41MTE5MiAxOC4zMDA3QzEuNTA0MDIgMTguMjAxNCAxLjUgMTguMTAxMSAxLjUgMThDMS41IDE1Ljk4NTEgMy4wODkwNSAxNC4zNDE0IDUuMDgyMjggMTQuMjUzN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0yMC4yMjU2IDE5LjM4OUMyMC4zNjEyIDE3LjYxNyAxOS45MTk2IDE1LjgxOTYgMTguOTU0NSAxNC4zMTAyQzE4Ljk0MjQgMTQuMjkxMyAxOC45MzAzIDE0LjI3MjUgMTguOTE4MSAxNC4yNTM3QzIwLjkxMTEgMTQuMzQxNiAyMi41IDE1Ljk4NTMgMjIuNSAxOEMyMi41IDE4LjEwMTEgMjIuNDk2IDE4LjIwMTQgMjIuNDg4MSAxOC4zMDA3TDIyLjQ3ODQgMTguNDIyMkMyMi40NjA4IDE4LjY0MzkgMjIuMzE0MiAxOC44MzQzIDIyLjEwNDUgMTguOTA4MkwyMS45ODk2IDE4Ljk0ODdDMjEuNDIzNCAxOS4xNDgxIDIwLjgzMzYgMTkuMjk2NiAyMC4yMjU2IDE5LjM4OVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==" alt="user group icon" width="24" height="24"/>');
});

it('should render custom icon tag', function () {
$this->render('<s-i-icon name=" user group " type="solid" width="24" height="24" size="24"/>')->toEqual('<i style="content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4yNSA2Ljc1QzguMjUgNC42Nzg5MyA5LjkyODkzIDMgMTIgM0MxNC4wNzExIDMgMTUuNzUgNC42Nzg5MyAxNS43NSA2Ljc1QzE1Ljc1IDguODIxMDcgMTQuMDcxMSAxMC41IDEyIDEwLjVDOS45Mjg5MyAxMC41IDguMjUgOC44MjEwNyA4LjI1IDYuNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1Ljc1IDkuNzVDMTUuNzUgOC4wOTMxNSAxNy4wOTMxIDYuNzUgMTguNzUgNi43NUMyMC40MDY5IDYuNzUgMjEuNzUgOC4wOTMxNSAyMS43NSA5Ljc1QzIxLjc1IDExLjQwNjkgMjAuNDA2OSAxMi43NSAxOC43NSAxMi43NUMxNy4wOTMxIDEyLjc1IDE1Ljc1IDExLjQwNjkgMTUuNzUgOS43NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4yNSA5Ljc1QzIuMjUgOC4wOTMxNSAzLjU5MzE1IDYuNzUgNS4yNSA2Ljc1QzYuOTA2ODUgNi43NSA4LjI1IDguMDkzMTUgOC4yNSA5Ljc1QzguMjUgMTEuNDA2OSA2LjkwNjg1IDEyLjc1IDUuMjUgMTIuNzVDMy41OTMxNSAxMi43NSAyLjI1IDExLjQwNjkgMi4yNSA5Ljc1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjMwOTg2IDE1LjExNzVDNy41MDc4MyAxMy4yNDQ0IDkuNjA4MzUgMTIgMTIgMTJDMTQuMzkxOSAxMiAxNi40OTI3IDEzLjI0NDcgMTcuNjkwNiAxNS4xMTgyQzE4LjUxODcgMTYuNDEzNCAxOC44NzcgMTcuOTc1MiAxOC43MDkgMTkuNDk3OUMxOC42ODI3IDE5LjczNTkgMTguNTQ0NCAxOS45NDcgMTguMzM2OCAyMC4wNjYyQzE2LjQ2OTQgMjEuMTM3NiAxNC4zMDUxIDIxLjc1IDEyIDIxLjc1QzkuNjk0OTIgMjEuNzUgNy41MzA1OSAyMS4xMzc2IDUuNjYzMjUgMjAuMDY2MkM1LjQ1NTU5IDE5Ljk0NyA1LjMxNzMgMTkuNzM1OSA1LjI5MTAzIDE5LjQ5NzlDNS4xMjI5MyAxNy45NzQ5IDUuNDgxNDEgMTYuNDEyOSA2LjMwOTg2IDE1LjExNzVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNS4wODIyOCAxNC4yNTM3QzUuMDcwMjQgMTQuMjcyMiA1LjA1ODI3IDE0LjI5MDcgNS4wNDYzOCAxNC4zMDkzQzQuMDgwOTEgMTUuODE4OSAzLjYzOTA4IDE3LjYxNjcgMy43NzQ3MSAxOS4zODlDMy4xNjY2NyAxOS4yOTY3IDIuNTc2NyAxOS4xNDgxIDIuMDEwNDMgMTguOTQ4N0wxLjg5NTQ3IDE4LjkwODJDMS42ODU3NiAxOC44MzQzIDEuNTM5MjMgMTguNjQzOSAxLjUyMTU5IDE4LjQyMjJMMS41MTE5MiAxOC4zMDA3QzEuNTA0MDIgMTguMjAxNCAxLjUgMTguMTAxMSAxLjUgMThDMS41IDE1Ljk4NTEgMy4wODkwNSAxNC4zNDE0IDUuMDgyMjggMTQuMjUzN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0yMC4yMjU2IDE5LjM4OUMyMC4zNjEyIDE3LjYxNyAxOS45MTk2IDE1LjgxOTYgMTguOTU0NSAxNC4zMTAyQzE4Ljk0MjQgMTQuMjkxMyAxOC45MzAzIDE0LjI3MjUgMTguOTE4MSAxNC4yNTM3QzIwLjkxMTEgMTQuMzQxNiAyMi41IDE1Ljk4NTMgMjIuNSAxOEMyMi41IDE4LjEwMTEgMjIuNDk2IDE4LjIwMTQgMjIuNDg4MSAxOC4zMDA3TDIyLjQ3ODQgMTguNDIyMkMyMi40NjA4IDE4LjY0MzkgMjIuMzE0MiAxOC44MzQzIDIyLjEwNDUgMTguOTA4MkwyMS45ODk2IDE4Ljk0ODdDMjEuNDIzNCAxOS4xNDgxIDIwLjgzMzYgMTkuMjk2NiAyMC4yMjU2IDE5LjM4OVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==);" aria-label="user group icon" width="24" height="24"></i>');
});

0 comments on commit 46c79b3

Please sign in to comment.