mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 13:57:41 +01:00
c9101f0f39
* add sidebar topics * Start with styling icons doc * write some doc text * add sandpack * Add custom sandpack theme * Adjust sandpack * update sidebar * Add example * Add more examples * updat lockfile * update vitepress * Fix sidebar * Adjust theme with latest vitepress! * Example updates! * Finish last examples * Remove markdown comments * Update docs/guide/advanced/filled-icons.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Process feedback * Add editor width percentage * process feedback --------- Co-authored-by: Jakob Guddas <github@jguddas.de>
2.0 KiB
2.0 KiB
<script setup>
import { Sandpack } from 'sandpack-vue3'
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
import sizeIconExample from './examples/size-icon-example/files.ts'
import sizeIconCssExample from './examples/size-icon-css-example/files.ts'
import sizeIconFontExample from './examples/size-icon-font-example/files.ts'
import sizeIconTailwind from './examples/size-icon-tailwind-example/files.ts'
</script>
Adjusting the icon size using the
Sizing
By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.
Adjusting the icon size using the size prop
Adjusting the icon size via CSS
The CSS properties width and height can be used to adjust the icon size.
Dynamically change the icon size based on the font size
It is possible to resize icons based on font size. This can be achieved using the em unit. See this MDN article for more information on the em unit.
Resizing with Tailwind
h-* and w-* utilities can be used to adjust the size of the icon.