Visual Framework
Visual Framework
{% raw %}
{% render '@vf-favicon', {
apple_touch_icon: "../../assets/vf-favicon/assets/apple-touch-icon.png",
icon_32: "../../assets/vf-favicon/assets/favicon-32x32.png",
icon_16: "../../assets/vf-favicon/assets/favicon-16x16.png",
manifest: "../../assets/vf-favicon/assets/site.webmanifest",
icon_mask: "../../assets/vf-favicon/assets/safari-pinned-tab.svg",
color_mask: "#ffffff",
color_msapplication: "#ffffff",
color_theme: "#ffffff"
} %}
{% endraw %}
Yields:
{% render '@vf-favicon', {
apple_touch_icon: "../../assets/vf-favicon/assets/apple-touch-icon.png",
icon_32: "../../assets/vf-favicon/assets/favicon-32x32.png",
icon_16: "../../assets/vf-favicon/assets/favicon-16x16.png",
manifest: "../../assets/vf-favicon/assets/site.webmanifest",
icon_mask: "../../assets/vf-favicon/assets/safari-pinned-tab.svg",
color_mask: "#ffffff",
color_msapplication: "#ffffff",
color_theme: "#ffffff"
} %}
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type" : "element",
"apple_touch_icon" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png",
"icon_favicon" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico",
"icon_32" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png",
"icon_16" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png",
"manifest" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest",
"icon_mask" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg",
"color_mask" : "#ffffff",
"color_msapplication" : "#ffffff",
"color_theme" : "#ffffff",
}
%}
{% include "../path_to/vf-favicon/vf-favicon.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-favicon', {
"component-type" : "element",
"apple_touch_icon" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png",
"icon_favicon" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico",
"icon_32" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png",
"icon_16" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png",
"manifest" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest",
"icon_mask" : "https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg",
"color_mask" : "#ffffff",
"color_msapplication" : "#ffffff",
"color_theme" : "#ffffff",}
%}
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png">
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest">
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
This component is distributed with npm. After installing npm, you can install the vf-favicon with this command.
$ yarn add --dev @visual-framework/vf-favicon
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
File system location: components/vf-favicon
Find an issue on this page? Propose a change or discuss it.
Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.
