mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-13 13:48:26 +00:00
KarsaandEric Fennis
99d25bdee2
* feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * chore(icons): revert git hook changes made to icons * fix(packages/astro,react-native,vue): fix iconNode type fix(packages/vue): fix hasA11yProp * fix(packages/solid): make component reactive & add unit tests for checking prop changes * test(packages/vue): add reactivity tests to @lucide/vue * fix(packages): replace cpy-cli, accidentally removed during main merge * docs(packages): upgrade react documentation with nonScalingStroke * fix(tests): update snapshots for lucide-react * feat(docs): upgraded package guides with nonScalingStroke, dropping absoluteStrokeWidth * fix(vue,react-native): fix linting issues * fix(icons): add proper fallback for icon width in calculatedStrokeWidth * fix(packages/svelte): add globalProps.class to icons * fix(packages/shared): wrap width, height & size in isDefined * Update types.ts * fix(packages/svelte): do not pass propsClass to mergeClasses --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
1.6 KiB
1.6 KiB
title, description
| title | description |
|---|---|
| Global Styling - Astro | Learn how to apply global styling to Lucide icons in your Astro applications using CSS. |
Global Styling
Adjusting icons can be done by using color, size and stroke width. To style all icons globally you can use CSS.
Style by using CSS
Styling icons is easy to accomplish using CSS.
Every icon has a class attribute applied called lucide. This class name can be used in the CSS file to target all icons that are being used within the app.
- The color of the icons can be changed using the
colorCSS property. - The size of the icons can be changed using
widthandheightCSS properties. - The stroke width of the icons can be changed using the
stroke-widthCSS property.
.lucide {
color: #ffadff;
width: 56px;
height: 56px;
stroke-width: 1px;
}
Non-scaling strokes
For global non-scaling stroke width styling the vector-effect: non-scaling-stroke CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See non-scaling strokes for more info.
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}