diff --git a/readme.md b/readme.md index 4bc76df..3753654 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Font Awesome SVG - PHP -A PHP class that can be used to add [Font Awesome 5+](https://fontawesome.com/)'s SVG icons inline without Javascript. +A PHP class that can be used to add [Font Awesome 6+](https://fontawesome.com/)'s SVG icons inline without Javascript. ## Installation @@ -26,37 +26,37 @@ Or you can download the `FontAwesomeSVG.php` file and include it manually. // $dir = directory where SVG files are $FA = new FontAwesomeSVG($dir); -echo $FA->get_svg('fas fa-file'); +echo $FA->get_svg('fa-solid fa-file'); ``` Add custom classes: ```php -echo $FA->get_svg('fas fa-file', ['class' => 'my-custom-class another-class']); +echo $FA->get_svg('fa-solid fa-file', ['class' => 'my-custom-class another-class']); ``` Remove default class `.svg-inline--fa`: ```php -echo $FA->get_svg('fas fa-file', ['default_class' => false]); +echo $FA->get_svg('fa-solid fa-file', ['default_class' => false]); ``` Change `` fill (default is `currentColor`): ```php -echo $FA->get_svg('fas fa-file', ['fill' => '#f44336']); +echo $FA->get_svg('fa-solid fa-file', ['fill' => '#f44336']); ``` Add ``: ```php -echo $FA->get_svg('fas fa-file', ['title' => 'My accessible icon']); +echo $FA->get_svg('fa-solid fa-file', ['title' => 'My accessible icon']); ``` Multiple options at once: ```php -echo $FA->get_svg('fas fa-file', [ +echo $FA->get_svg('fa-solid fa-file', [ 'class' => 'my-custom-class another-class', 'default_class' => false, 'title' => 'My title', @@ -68,7 +68,7 @@ echo $FA->get_svg('fas fa-file', [ Customise duotone icons: ```php -echo $FA->get_svg('fad fa-laugh-wink', [ +echo $FA->get_svg('fa-duotone fa-laugh-wink', [ 'primary' => [ 'fill' => '#e64980', ], @@ -95,6 +95,16 @@ echo $FA->get_svg('fad fa-laugh-wink', [ > Requires **v5.10.0** or greater, and a FontAwesome Pro license +## Sharp + +> Requires **v6.4.0** or greater, and a FontAwesome Pro license + +```php +echo $FA->get_svg('fa-sharp fa-light fa-file'); +echo $FA->get_svg('fa-sharp fa-regular fa-file'); +echo $FA->get_svg('fa-sharp fa-solid fa-file'); +``` + ### options If `inline_style` is enabled, the value of `fill` and `opacity` are also used in the inline style on `` tag. @@ -149,6 +159,24 @@ echo $FA->get_svg('fad fa-laugh-wink', [ ]); ``` +## Aliases + +The short aliases from version 5 are still supported + +```php +echo $FA->get_svg('fab fa-twitter'); +echo $FA->get_svg('fad fa-file'); +echo $FA->get_svg('fal fa-file'); +echo $FA->get_svg('far fa-file'); +echo $FA->get_svg('fas fa-file'); + +// And the new shorthands for thin and sharp +echo $FA->get_svg('fat fa-file'); // thin +echo $FA->get_svg('fasl fa-file'); // sharp-light +echo $FA->get_svg('fasr fa-file'); // sharp-regular +echo $FA->get_svg('fass fa-file'); // sharp-solid +``` + ## Accessibility The below is implemented based on: @@ -169,7 +197,7 @@ The below is implemented based on: You can set a ``, an `id` for the `` and the `aria-labelledby` attribute will be added automatically: ```php -echo $FA->get_svg('fas fa-file', [ +echo $FA->get_svg('fa-solid fa-file', [ 'title' => 'File', 'title_id' => 'file-id', ]); @@ -186,7 +214,7 @@ echo $FA->get_svg('fas fa-file', [ You can add any aria-\* attribute to the SVG tag: ```php -echo $FA->get_svg('fas fa-file', [ +echo $FA->get_svg('fa-solid fa-file', [ 'aria-label' => 'File', ]); ``` @@ -200,7 +228,7 @@ echo $FA->get_svg('fas fa-file', [ `aria-hidden="true"` is added to the SVG tag by default unless `<title id="">` (and `aria-labelledby`) or `aria-label` is set. ```php -echo $FA->get_svg('fas fa-file'); +echo $FA->get_svg('fa-solid fa-file'); ``` ```html diff --git a/src/FontAwesomeSVG.php b/src/FontAwesomeSVG.php index cb4138f..9f1f586 100644 --- a/src/FontAwesomeSVG.php +++ b/src/FontAwesomeSVG.php @@ -174,13 +174,14 @@ public function get_svg($id, $opts=[]) { public function get_icon_details($id) { $icon = array(); - $id = explode(' ', $id); - $dir = $this->get_icon_dir($id[0]); - $filename = $this->get_icon_filename($id[1]); + $classes = explode(' ', $id); + $dir = $this->get_icon_dir($classes); + $filename = $this->get_icon_filename($classes, $dir); + $filepath = $this->get_icon_filepath($dir, $filename); $icon['dir'] = $dir; $icon['filename'] = $filename; - $icon['filepath'] = str_replace('/', DIRECTORY_SEPARATOR, "$this->svg_dir/$dir/$filename.svg"); + $icon['filepath'] = $filepath; if(!is_file($icon['filepath'])) { throw new Exception('File ' . $icon['filepath'] . ' does not exist.'); @@ -198,30 +199,33 @@ public function get_icon_details($id) { * @param string $style * @return string */ - public function get_icon_dir($style) { - switch($style) { - case 'far': - $dir = 'regular'; - break; + public function get_icon_dir($classes) { + if (in_array('fa-sharp', $classes)) { + if (in_array('fa-regular', $classes)) return 'sharp-regular'; + if (in_array('fa-light', $classes)) return 'sharp-light'; + if (in_array('fa-solid', $classes)) return 'sharp-solid'; + } - case 'fal': - $dir = 'light'; - break; + if (in_array('fasr', $classes)) return 'sharp-regular'; + if (in_array('fasl', $classes)) return 'sharp-light'; + if (in_array('fass', $classes)) return 'sharp-solid'; - case 'fab': - $dir = 'brands'; - break; + if (in_array('far', $classes)) return 'regular'; + if (in_array('fa-regular', $classes)) return 'regular'; - case 'fad': - $dir = 'duotone'; - break; + if (in_array('fal', $classes)) return 'light'; + if (in_array('fa-light', $classes)) return 'light'; - case 'fas': - default: - $dir = 'solid'; - } + if (in_array('fab', $classes)) return 'brands'; + if (in_array('fa-brands', $classes)) return 'brands'; - return $dir; + if (in_array('fad', $classes)) return 'duotone'; + if (in_array('fa-duotone', $classes)) return 'duotone'; + + if (in_array('fat', $classes)) return 'thin'; + if (in_array('fa-thin', $classes)) return 'thin'; + + return 'solid'; } @@ -230,10 +234,36 @@ public function get_icon_dir($style) { /** * Get the icon's SVG file name * - * @param string $icon_name + * @param array $classes + * @param string $dir + * @return string + */ + public function get_icon_filename($classes, $dir) { + foreach ($classes as $class) { + $filename = str_replace('fa-', '', $class); + $path = $this->get_icon_filepath($dir, $filename); + + if (is_file($path)) { + return $filename; + } + } + + $id = join(' ', $classes); + + throw new Exception("No icon found for '$id'"); + } + + + + + /** + * Get the icon's SVG file path + * + * @param string $dir + * @param string $filename * @return string */ - public function get_icon_filename($icon_name) { - return str_replace('fa-', '', $icon_name); + public function get_icon_filepath($dir, $filename) { + return str_replace('/', DIRECTORY_SEPARATOR, "$this->svg_dir/$dir/$filename.svg"); } -} \ No newline at end of file +} diff --git a/tests/Fixtures/icons/sharp-light/test.svg b/tests/Fixtures/icons/sharp-light/test.svg new file mode 100644 index 0000000..9333296 --- /dev/null +++ b/tests/Fixtures/icons/sharp-light/test.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M397.694,25.056L14.611,461.893C6.605,471.022 7.517,484.933 16.647,492.939C25.776,500.944 39.687,500.032 47.693,490.903L430.775,54.067C438.781,44.938 437.869,31.027 428.74,23.021C419.611,15.015 405.699,15.927 397.694,25.056Z"/></svg> diff --git a/tests/Fixtures/icons/sharp-regular/test.svg b/tests/Fixtures/icons/sharp-regular/test.svg new file mode 100644 index 0000000..9333296 --- /dev/null +++ b/tests/Fixtures/icons/sharp-regular/test.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M397.694,25.056L14.611,461.893C6.605,471.022 7.517,484.933 16.647,492.939C25.776,500.944 39.687,500.032 47.693,490.903L430.775,54.067C438.781,44.938 437.869,31.027 428.74,23.021C419.611,15.015 405.699,15.927 397.694,25.056Z"/></svg> diff --git a/tests/Fixtures/icons/sharp-solid/test.svg b/tests/Fixtures/icons/sharp-solid/test.svg new file mode 100644 index 0000000..9333296 --- /dev/null +++ b/tests/Fixtures/icons/sharp-solid/test.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M397.694,25.056L14.611,461.893C6.605,471.022 7.517,484.933 16.647,492.939C25.776,500.944 39.687,500.032 47.693,490.903L430.775,54.067C438.781,44.938 437.869,31.027 428.74,23.021C419.611,15.015 405.699,15.927 397.694,25.056Z"/></svg> diff --git a/tests/Fixtures/icons/thin/test.svg b/tests/Fixtures/icons/thin/test.svg new file mode 100644 index 0000000..9333296 --- /dev/null +++ b/tests/Fixtures/icons/thin/test.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M397.694,25.056L14.611,461.893C6.605,471.022 7.517,484.933 16.647,492.939C25.776,500.944 39.687,500.032 47.693,490.903L430.775,54.067C438.781,44.938 437.869,31.027 428.74,23.021C419.611,15.015 405.699,15.927 397.694,25.056Z"/></svg> diff --git a/tests/Unit/FontAwesomeSVGTest.php b/tests/Unit/FontAwesomeSVGTest.php index 9884806..4874296 100644 --- a/tests/Unit/FontAwesomeSVGTest.php +++ b/tests/Unit/FontAwesomeSVGTest.php @@ -11,11 +11,24 @@ final class FontAwesomeSVGTest extends TestCase static public function icons(): array { return [ - ['fab fa-test'], - ['fad fa-test'], - ['fal fa-test'], - ['far fa-test'], - ['fas fa-test'], + ['fab fa-test', 'brands', 'test'], + ['fad fa-test', 'duotone', 'test'], + ['fal fa-test', 'light', 'test'], + ['far fa-test', 'regular', 'test'], + ['fas fa-test', 'solid', 'test'], + ['fat fa-test', 'thin', 'test'], + ['fa-brands fa-test', 'brands', 'test'], + ['fa-duotone fa-test', 'duotone', 'test'], + ['fa-light fa-test', 'light', 'test'], + ['fa-regular fa-test', 'regular', 'test'], + ['fa-solid fa-test', 'solid', 'test'], + ['fa-thin fa-test', 'thin', 'test'], + ['fa-sharp fa-light fa-test', 'sharp-light', 'test'], + ['fa-sharp fa-regular fa-test', 'sharp-regular', 'test'], + ['fa-sharp fa-solid fa-test', 'sharp-solid', 'test'], + ['fasl fa-test', 'sharp-light', 'test'], + ['fasr fa-test', 'sharp-regular', 'test'], + ['fass fa-test', 'sharp-solid', 'test'], ]; } @@ -173,4 +186,17 @@ public function test_it_can_remove_duotone_inline_styles(): void $this->assertStringNotContainsString('--fa-secondary-color', $svg); $this->assertStringNotContainsString('--fa-secondary-opacity', $svg); } + + /** + * @dataProvider icons + */ + public function test_it_can_get_the_icons($icon, $dir, $filename): void + { + $fa = $this->createInstance(); + + $details = $fa->get_icon_details($icon); + + $this->assertStringContainsString($dir, $details['dir']); + $this->assertStringContainsString($filename, $details['filename']); + } }