agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 14:13:06 +00:00
Code Issues Releases Activity

Default to svg mode in Safari because of blurred icons bug

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-05-28 22:19:18 +03:00
parent 288505fd44
commit 465b76e05f
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
iconify-icon/icon/demo/usage.html
View File

@ -228,14 +228,21 @@
></iconify-icon> ></iconify-icon>
</p> </p>
<p> <p>
Flip (8 icons): Flip (4 icons, repeated 3 times with different mode attribute):
<iconify-icon inline icon="test:icon"></iconify-icon> <iconify-icon inline icon="test:icon"></iconify-icon>
<iconify-icon inline icon="test:icon" mode="svg"></iconify-icon>
<iconify-icon inline icon="test:icon" mode="style"></iconify-icon> <iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test:icon"
flip="horizontal" flip="horizontal"
></iconify-icon> ></iconify-icon>
<iconify-icon
inline
icon="test:icon"
flip="horizontal"
mode="svg"
></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test:icon"
@ -247,6 +254,12 @@
icon="test2:icon" icon="test2:icon"
flip="vertical" flip="vertical"
></iconify-icon> ></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="vertical"
mode="svg"
></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test2:icon" icon="test2:icon"
@ -258,6 +271,12 @@
icon="test2:icon" icon="test2:icon"
flip="horizontal,vertical" flip="horizontal,vertical"
></iconify-icon> ></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="horizontal,vertical"
mode="svg"
></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test2:icon" icon="test2:icon"

15
iconify-icon/icon/src/attributes/mode.ts
View File

@ -1,5 +1,13 @@
import type { ActualRenderMode, IconifyRenderMode } from './types'; import type { ActualRenderMode, IconifyRenderMode } from './types';
// Check for Safari
let isBuggedSafari = false;
try {
isBuggedSafari = navigator.vendor.indexOf('Apple') === 0;
} catch (err) {
//
}
/** /**
* Get render mode * Get render mode
*/ */
@ -12,9 +20,12 @@ export function getRenderMode(body: string, mode?: string): ActualRenderMode {
return mode as ActualRenderMode; return mode as ActualRenderMode;
} }
// Check for animation, use 'style' for animated icons // Check for animation, use 'style' for animated icons, unless browser is Safari
// (only <a>, which should be ignored or animations start with '<a') // (only <a>, which should be ignored or animations start with '<a')
if ((mode as IconifyRenderMode) !== 'style' && body.indexOf('<a') === -1) { if (
(mode as IconifyRenderMode) !== 'style' &&
(isBuggedSafari || body.indexOf('<a') === -1)
) {
// Render <svg> // Render <svg>
return 'svg'; return 'svg';
} }