Add Lucide basics guide on site

[ericfennis]

I am writing new documentation for the site with new guides to get started with Lucide and SVG icons.
The guide also contains a lot of basic code examples to show how it works.
I implemented Sandpack from Codesandbox. This is great because you get a little editor where you can make changes and it will render these changes Live. If you want to launch a Codesandbox you can do that with a direct button. This works really well.

This is still far in progress. If you like to help me on this, let me know!

Documentation

I thought of two sections: "basics" and "advanced".

Basics

The basics are really low-level UI programming with SVGs. This shows a lot of the features we builtin in Lucide, and shows how you can modify and style icons using props and CSS.

• Color, basic how to color Lucide icons
• Sizing, sizing icons to the favored size.
• Stroke width, adjust the style of the icon using stroke-width, plus a paragraph about "absolute stroke width"

Advanced (Will be added in another PR)

More advanced way of using Lucide icons in projects. Showing advanced ways how you can use the Lucide library to adjust the Icons to your need.

• Accessibility, basics about making accessible UI using Lucide icons
• Global styling, How you can style lucide icons on a global level
• Animations, How you could use CSS animations to animate SVG paths
• Filled icons, Not officially supported, but some icons can be filled.
• Combining icons, How you can nest icons. Creating combinations
• Dynamic imports, Using dynamic importing icons in projects, (still react only)

[ericfennis]

I will add the Advanced section in another PR. So people already can enjoy the new guides.

[ericfennis]

@JanTrichter Thanks a lot! I'm quite happy with this addition. Thanks for your feedback, I've added an editor width percentage, so it should look better now.

[ericfennis]

@JanTrichter Processes your feedback!

[JanTrichter]

Seems to be a common theme here that there is no space between code: and styles ^^

[ericfennis]

Oh tnx, didn't noticed will clean that up!

[ericfennis]

@JanTrichter Thanks for the feedback, I've processed it!