[ticket/15538] Twig icon function

PHPBB3-15538

phpBB/styles/prosilver/template/icons/font.html

@@ -0,0 +1,11 @@
+{% spaceless %}
+<i
+	class="icon fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	{% if S_HIDDEN %}
+		{% if TITLE %}title="{{ lang(TITLE) }}"{% endif %}
+		aria-hidden="true"
+	{% endif %}
+	{{ ATTRIBUTES }}
+></i>
+{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ lang(TITLE) }}</span>{% endif %}
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/png.html

@@ -0,0 +1,8 @@
+{% spaceless %}
+<img
+	class="icon png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	src="{{ SOURCE }}"
+	alt="{{ lang(TITLE) }}"
+	{{ ATTRIBUTES }}
+/>
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/svg.html

@@ -0,0 +1,21 @@
+{% spaceless %}
+	{% set TITLE_ID = TITLE ? TITLE|lower|replace({' ': '-'}) ~ '-' ~ random() %}
+<svg
+	class="icon svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	viewBox="0 0 24 24"
+	{% if TITLE %}
+		{% if S_HIDDEN %}aria-hidden="true"{% endif %}
+		aria-labelledby="{{ TITLE_ID }}"
+	{% endif %}
+	role="img"
+	{{ ATTRIBUTES }}
+>
+	{% if TITLE %}
+	<title id="{{ TITLE_ID }}">
+		{{ lang(TITLE) }}
+	</title>
+	{% endif %}
+
+	{{ SOURCE }}
+</svg>
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/svg/bars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="red" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

phpBB/styles/prosilver/template/icons/svg/envelope.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>

phpBB/styles/prosilver/template/icons/svg/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>My fake title!</title><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

phpBB/styles/prosilver/template/icons/svg/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>

phpBB/styles/prosilver/template/index_body.html

@@ -34,6 +34,36 @@
 	</form>
 <!-- ENDIF -->
 
+<div class="panel">
+	<h3>Font</h3>
+	<div>
+		{{ icon('font', 'bars', 'fa-fw icon-blue') }}
+		{{ icon('font', 'envelope-o') }}
+		{{ icon('font', 'pencil', '', '', true, {'data-ajax': 'true', 'data-refresh': 'true'}) }}
+		{{ icon('font', 'phone') }}
+		<a>{{ icon('font', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+		<a class="button">{{ icon('font', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+	<h3>PNG</h3>
+	<div>
+		{{ icon('png', 'bars') }}
+		{{ icon('png', 'envelope') }}
+		{{ icon('png', 'pencil') }}
+		{{ icon('png', 'phone') }}
+		<a>{{ icon('png', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+		<a class="button">{{ icon('png', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+	<h3>SVG</h3>
+	<div>
+		{{ icon('svg', 'bars', 'fa-fw icon-blue') }}
+		{{ icon('svg', 'envelope', '', 'USERNAME', false) }}
+		{{ icon('svg', 'pencil') }}
+		{{ icon('svg', 'phone') }}
+		<a>{{ icon('svg', 'pencil') }}</a>
+		<a class="button">{{ icon('svg', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+</div>
+
 <!-- EVENT index_body_stat_blocks_before -->
 
 <!-- IF S_DISPLAY_ONLINE_LIST -->
@@ -41,7 +71,7 @@
 		<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
 		<p>
 			<!-- EVENT index_body_block_online_prepend -->
-			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
+			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />
 			<!-- IF U_VIEWONLINE -->
 				<br />{LOGGED_IN_USER_LIST}
 				<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->

phpBB/styles/prosilver/theme/icons.css

@@ -5,6 +5,11 @@
 /* Global module setup
 ---------------------------------------- */
 
+/* Global svg colours fix */
+svg {
+	fill: currentColor;
+}
+
 /* Renamed version of .fa class for agnostic usage of icon fonts.
  * Just change the name of the font after the 14/1 to the name of
  * the font you wish to use.
@@ -27,6 +32,14 @@ blockquote cite:before,
 	text-rendering: auto; /* optimizelegibility throws things off #1094 */
 }
 
+img.icon,
+svg.icon {
+	width: 14px;
+	height: 14px;
+	display: inline-block;
+	vertical-align: middle;
+}
+
 .icon:before {
 	padding-right: 2px;
 }
@@ -39,18 +52,26 @@ blockquote cite:before,
 
 .icon.icon-xl {
 	font-size: 20px;
+	width: 20px;
+	height: 20px;
 }
 
 .icon.icon-lg {
 	font-size: 16px;
+	width: 16px;
+	height: 16px;
 }
 
 .icon.icon-md {
 	font-size: 10px;
+	width: 10px;
+	height: 10px;
 }
 
 .icon.icon-sm {
 	font-size: 8px;
+	width: 8px;
+	height: 8px;
 }
 
 /* icon modifiers */