Skip to content

Commit ec43489

Browse files
husseinalhammadhusseinalhammad
authored
Merge pull request #2 from husseinalhammad/dev
Duotone support
2 parents b901030 + 0bf4da0 commit ec43489

File tree

3 files changed

+165
-28
lines changed

3 files changed

+165
-28
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
fontawesome-svgs/
2+
.tinkerwell

‎readme.md‎

Lines changed: 88 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@ composer require husseinalhammad/fontawesome-svg
1212

1313
Or you can download the `FontAwesomeSVG.php` file and include it manually.
1414

15-
1615
## Usage
1716

1817
### Files
1918

20-
* Download Font Awesome (Free or Pro)
21-
* Get the folder `advanced-options/raw-svg` and place it in your project
22-
* Add `svg-with-js/css/fa-svg-with-js` to your document (or write your own CSS)
19+
- Download Font Awesome (Free or Pro)
20+
- Get the folder `advanced-options/raw-svg` and place it in your project
21+
- Add `svg-with-js/css/fa-svg-with-js` to your document (or write your own CSS)
2322

2423
### Examples
2524

@@ -66,15 +65,89 @@ echo $FA->get_svg('fas fa-file', [
6665
]);
6766
```
6867

69-
| Option | What it means |
70-
|-----------------------|--------------------------------------------------------------------------|
71-
| class | Adds classes to the SVG tag |
72-
| default_class | If set to `false`, the default CSS class won't be added to the SVG tag. Deafult: `true`. |
73-
| title | Adds a `<title>` inside the SVG tag for semantic icons |
74-
| title_id | Adds an `id` attribute to `<title>` and adds `aria-labelledby` on the SVG tag with the same value |
75-
| role | The value of the `role` attribute in the SVG tag. Default: `img` |
76-
| fill | The value of the `fill` attribute in the `<path>` inside the SVG. Default: `currentColor` |
68+
Customise duotone icons:
69+
70+
```php
71+
echo $FA->get_svg('fad fa-laugh-wink', [
72+
'primary' => [
73+
'fill' => '#e64980',
74+
],
75+
'secondary' => [
76+
'fill' => '#fcc417',
77+
'opacity' => '1',
78+
],
79+
]);
80+
```
81+
82+
| Option | What it means |
83+
| ------------- | ------------------------------------------------------------------------------------------------- |
84+
| class | Adds classes to the SVG tag |
85+
| default_class | If set to `false`, the default CSS class won't be added to the SVG tag. Deafult: `true`. |
86+
| inline_style | Whether to add duotone styles as inline style to the `<svg>` tag. Deafult: `true`. |
87+
| title | Adds a `<title>` inside the SVG tag for semantic icons |
88+
| title_id | Adds an `id` attribute to `<title>` and adds `aria-labelledby` on the SVG tag with the same value |
89+
| role | The value of the `role` attribute in the SVG tag. Default: `img` |
90+
| fill | The value of the `fill` attribute in the `<path>` inside the SVG. Default: `currentColor` |
91+
| primary | Duotone primary options (see table below) |
92+
| secondary | Duotone secondary options (see table below) |
93+
94+
## Duotone
95+
96+
> Requires **v5.10.0** or greater, and a FontAwesome Pro license
97+
98+
### options
99+
100+
If `inline_style` is enabled, the value of `fill` and `opacity` are also used in the inline style on `<svg>` tag.
101+
102+
| Option | What it means |
103+
| ------- | ----------------------------------------------------------------------------------------- |
104+
| fill | The value of the `fill` attribute in the `<path>` inside the SVG. Default: `currentColor` |
105+
| opacity | The value of the `opacity` attribute in the `<path>` inside the SVG. |
106+
107+
### Examples:
108+
109+
Single colour:
110+
111+
```php
112+
echo $FA->get_svg('fad fa-laugh-wink', [
113+
'fill' => '#e64980',
114+
]);
115+
```
116+
117+
Swapping Layer Opacity:
77118

119+
```php
120+
echo $FA->get_svg('fad fa-laugh-wink', [
121+
'fill' => '#e64980',
122+
'class' => 'fa-swap-opacity',
123+
]);
124+
```
125+
126+
Single colour with custom opacity:
127+
128+
```php
129+
echo $FA->get_svg('fad fa-laugh-wink', [
130+
'fill' => '#e64980',
131+
'secondary' => [
132+
'opacity' => '0.2',
133+
],
134+
]);
135+
```
136+
137+
Custom colours and opacity:
138+
139+
```php
140+
echo $FA->get_svg('fad fa-laugh-wink', [
141+
'primary' => [
142+
'fill' => '#e64980',
143+
'opacity' => '0.5',
144+
],
145+
'secondary' => [
146+
'fill' => '#fcc417',
147+
'opacity' => '1',
148+
],
149+
]);
150+
```
78151

79152
## Accessibility
80153

@@ -83,7 +156,6 @@ The below is implemented based on:
83156
- Font Awesome's [Accessibility docs](https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility)
84157
- Heather Migliorisi's article on CSS-Tricks [Accessible SVGs](https://css-tricks.com/accessible-svgs/)
85158

86-
87159
### `role` attribute
88160

89161
`role="img"` is added to the SVG tag by default:
@@ -92,7 +164,6 @@ The below is implemented based on:
92164
<svg role="img"></svg>
93165
```
94166

95-
96167
### `<title>`, `aria-labelledby`
97168

98169
You can set a `<title>`, an `id` for the `<title>` and the `aria-labelledby` attribute will be added automatically:
@@ -106,14 +177,13 @@ echo $FA->get_svg('fas fa-file', [
106177

107178
```html
108179
<svg aria-labelledby="file-id">
109-
<title id="file-id">File</title>
180+
<title id="file-id">File</title>
110181
</svg>
111182
```
112183

113-
114184
### `aria-*` attributes
115185

116-
You can add any aria-* attribute to the SVG tag:
186+
You can add any aria-\* attribute to the SVG tag:
117187

118188
```php
119189
echo $FA->get_svg('fas fa-file', [
@@ -125,7 +195,6 @@ echo $FA->get_svg('fas fa-file', [
125195
<svg aria-label="File"></svg>
126196
```
127197

128-
129198
### `aria-hidden` attribute
130199

131200
`aria-hidden="true"` is added to the SVG tag by default unless `<title id="">` (and `aria-labelledby`) or `aria-label` is set.
@@ -136,4 +205,4 @@ echo $FA->get_svg('fas fa-file');
136205

137206
```html
138207
<svg aria-hidden="true"></svg>
139-
```
208+
```

‎src/FontAwesomeSVG.php‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ class FontAwesomeSVG {
55
public $svg_dir;
66

77
public function __construct($svg_dir) {
8+
if( !is_dir($svg_dir) ) {
9+
throw new Exception("Directory $svg_dir does not exist");
10+
}
11+
812
$this->svg_dir = $svg_dir;
913
}
1014

@@ -29,11 +33,12 @@ public function get_svg($id, $opts=[]) {
2933
$doc->load($icon['filepath']);
3034

3135
$default_opts = [
32-
'title' => false,
33-
'class' => false,
36+
'title' => false,
37+
'class' => false,
3438
'default_class' => true,
35-
'role' => 'img',
36-
'fill' => 'currentColor',
39+
'inline_style' => true,
40+
'role' => 'img',
41+
'fill' => 'currentColor',
3742
];
3843

3944
$opts = array_merge($default_opts, $opts);
@@ -90,9 +95,69 @@ public function get_svg($id, $opts=[]) {
9095

9196

9297

98+
9399
foreach ($doc->getElementsByTagName('path') as $item) {
94-
$item->setAttribute('fill', $opts['fill']);
100+
$fill = $opts['fill'];
101+
$opacity = false;
102+
103+
// duotone
104+
switch($item->getAttribute('class')) {
105+
case 'fa-primary':
106+
if(isset($opts['primary']['fill'])) $fill = $opts['primary']['fill'];
107+
if(isset($opts['primary']['opacity'])) $opacity = $opts['primary']['opacity'];
108+
break;
109+
110+
111+
case 'fa-secondary':
112+
if(isset($opts['secondary']['fill'])) $fill = $opts['secondary']['fill'];
113+
if(isset($opts['secondary']['opacity'])) $opacity = $opts['secondary']['opacity'];
114+
break;
115+
}
116+
117+
118+
$item->setAttribute('fill', $fill);
119+
if($opacity) $item->setAttribute('opacity', $opacity);
95120
}
121+
122+
123+
124+
125+
126+
// duotone styles
127+
if($opts['inline_style']) {
128+
$styles = [];
129+
130+
if(isset($opts['primary']['fill'])) {
131+
$styles[] = '--fa-primary-color:' . $opts['primary']['fill'];
132+
}
133+
134+
if(isset($opts['primary']['opacity'])) {
135+
$styles[] = '--fa-primary-opacity:' . $opts['primary']['opacity'];
136+
}
137+
138+
139+
if(isset($opts['secondary']['fill'])) {
140+
$styles[] = '--fa-secondary-color:' . $opts['secondary']['fill'];
141+
}
142+
143+
if(isset($opts['secondary']['opacity'])) {
144+
$styles[] = '--fa-secondary-opacity:' . $opts['secondary']['opacity'];
145+
}
146+
147+
148+
if(empty($styles) || !isset($opts['primary']['fill'], $opts['secondary']['fill']) ) {
149+
$styles[] = 'color:' . $opts['fill'];
150+
}
151+
152+
153+
154+
if($styles) {
155+
foreach ($doc->getElementsByTagName('svg') as $svg) {
156+
$svg->setAttribute('style', implode(';', $styles));
157+
}
158+
}
159+
}
160+
96161

97162
return $doc->saveHTML();
98163
}
@@ -135,10 +200,6 @@ public function get_icon_details($id) {
135200
*/
136201
public function get_icon_dir($style) {
137202
switch($style) {
138-
case 'fas':
139-
$dir = 'solid';
140-
break;
141-
142203
case 'far':
143204
$dir = 'regular';
144205
break;
@@ -151,6 +212,11 @@ public function get_icon_dir($style) {
151212
$dir = 'brands';
152213
break;
153214

215+
case 'fad':
216+
$dir = 'duotone';
217+
break;
218+
219+
case 'fas':
154220
default:
155221
$dir = 'solid';
156222
}

0 commit comments

Comments
 (0)