Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: global Lucide SVG inline flow fix in app.css

Browse Source 
Lucide renders <svg> elements which default to inline-block in browsers,
causing icons to break onto their own line when mixed with text — unlike
FA spans which were display:inline.

Added svg.lucide { display: inline; vertical-align: middle; } to app.css
so all Lucide icons flow inline with adjacent text globally, matching the
FA icon behavior without needing class="inline" on every icon instance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 15:08:24 -04:00
parent 998b10c5de
commit e06833065e
1 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app.css
View File

@@ -168,6 +168,23 @@ html.light { color-scheme: light; }
background-color: rgb(55 65 81); background-color: rgb(55 65 81);
} }
/* ============================================================
* Lucide SVG icon inline flow fix.
*
* FA icon spans were display:inline and flowed naturally with adjacent text.
* Lucide renders <svg> elements which default to inline-block in most browsers,
* causing icons to break onto their own line when mixed with text.
*
* This global rule restores the FA-equivalent behavior: icons flow inline
* with text and are vertically centered on the text baseline.
* Components that already explicitly set display:flex on their parent are
* unaffected — flex children ignore display:inline.
* ============================================================ */
svg.lucide {
display: inline;
vertical-align: middle;
}
/* There are no more Tailwind layers. */ /* There are no more Tailwind layers. */
html, html,