Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

POC: theme icons map #551

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

POC: theme icons map #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3dafb71
icons map POC
Oksydan Sep 28, 2023
ffdab61
POC - simplify render function and example for external svg sprite file
Oksydan Oct 5, 2023
2fa84cd
yarn.lock file removed
Oksydan Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
node_modules
assets
.env
coverage
assets/*
!assets/resources
!assets/resources/*
8 changes: 8 additions & 0 deletions assets/resources/icons-sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 29 additions & 1 deletion modules/ps_shoppingcart/ps_shoppingcart.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,35 @@
<span class="header-block__action-btn">
{/if}

<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
{*
OLD ICON
<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
*}

{renderThemeIcon
iconName="cart"
extraAttributes=[
"aria-hidden" => "true",
"class" => "header-block__icon"
]
}

{renderThemeIconSvg
iconName="cart"
extraAttributes=[
"aria-hidden" => "true",
"class" => "header-block__icon"
]
}

{renderThemeIconSvgExternal
iconName="cart"
extraAttributes=[
"aria-hidden" => "true",
"class" => "header-block__icon"
]
}

<span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
<span class="header-block__badge">{$cart.products_count}</span>

Expand Down
13 changes: 13 additions & 0 deletions src/scss/partials/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,16 @@
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}

/**
* Generic svg-icon class that sets basic styles to make icons act like a icon font, but with the benefits of an svg.
*/
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
display: inline-block;
font-size: 24px; // To match the Material Icons font-size POC only
overflow: hidden;
vertical-align: middle;
}
125 changes: 125 additions & 0 deletions templates/_partials/helpers.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,128 @@
>
</a>
{/function}

{assign
var=iconsMap
value=[
"cart" => "shopping_cart"
]
scope="global"
}


{** SVG SPRITE **}

<svg class="d-none">
<defs>
<g id="shopping_cart">
<path
d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/>
</g>
</defs>
</svg>


{**
* @param string iconName
* @param array extraAttributes
* @return string
* @example
* {renderIcon name='cart' extraAttributes=['class' => 'my-extra-class']}
*}
{function renderThemeIcon iconName="" extraAttributes=[]}
{if $iconName && !empty($iconsMap[$iconName])}

<span
class="material-icons {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we have material-icons hardcoded so what would happen if someone wanted to use another icon lib? They override this smarty template?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matks thank you for your response.
Tbh modules aren't aware what icon fonts theme use. It's theme responsibility do display proper icon to given icon key. If you would like to change icon fonts to for example font-awsome, all you have to do is changing material icons to fa and map keys to your new icon-fonts.
Instead of:

{assign
  var=iconsMap
  value=[
    "cart" => "shopping_cart"
  ]
  scope="global"
}

for example:

{assign
  var=iconsMap
  value=[
    "cart" => "fa-shopping-cart" // not sure it's valid icon class
  ]
  scope="global"
}

{foreach $extraAttributes as $key => $value}
{if $key != 'class'}
{$key}="{$value}"
{/if}
{/foreach}
>
{$iconsMap[$iconName]}
</span>
{/if}
{/function}

{assign
var=iconsMapSvg
value=[
"cart" => [
"name" => "shopping_cart",
"viewbox" => "0 -960 960 960"
]
]
scope="global"
}


{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
{function renderThemeIconSvg iconName="" extraAttributes=[]}
{if $iconName && !empty($iconsMapSvg[$iconName])}
{$icon = $iconsMapSvg[$iconName]}

<svg
class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
{foreach $extraAttributes as $key => $value}
{if $key != 'class'}
{$key}="{$value}"
{/if}
{/foreach}
{if !empty($icon.viewbox)}
viewBox="{$icon.viewbox}"
{/if}
>
<use xlink:href="#{$icon.name}"></use>
</svg>
{/if}
{/function}

{assign
var=externalSvgFileUrl
value="`$urls.theme_assets`resources/icons-sprite.svg"
scope="global"
}

{*
External svg file can be preloaded just like fonts
but be aware if you are using cdn you won't be able to use it
due to security reasons
You should find better way to build this url forexample inside module
*}

<link rel="preload" as="image" href="{$externalSvgFileUrl}" />

{assign
var=iconsMapSvgExternal
value=[
"cart" => [
"name" => "shopping_cart",
"viewbox" => "0 -960 960 960"
]
]
scope="global"
}

{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
{function renderThemeIconSvgExternal iconName="" extraAttributes=[]}
{if $iconName && !empty($iconsMapSvgExternal[$iconName])}
{$icon = $iconsMapSvgExternal[$iconName]}

<svg
class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
{foreach $extraAttributes as $key => $value}
{if $key != 'class' && $value}
{$key}="{$value}"
{/if}
{/foreach}
{if !empty($icon.viewbox)}
viewBox="{$icon.viewbox}"
{/if}
>
<use xlink:href="{$externalSvgFileUrl}#{$icon.name}"></use>
</svg>
{/if}
{/function}

Loading