license and some docs

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 FifthTry, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,42 +1,5 @@
-# Overview
+# `svg-icons`
 
-[doc-site](https://fastn-community.github.io/doc-site/) will help you create
-a beautiful documentation site in no time.
-
-It provides out-of-the-box documentation features that can be used to create any
-kind of site(personal website, blog, etc).
-
-# Preview
-
-![doc-site](.github/assets/doc-site-example-dark.jpg)
-
-## Get Rolling
-
-[Click here](https://fastn-community.github.io/doc-site/) to learn how to use this template.
-
-# [Dive into the Docs](https://fastn-community.github.io/doc-site/)
-
-# See it in Action!
-
-Explore websites and projects that have utilized this component/template 
-**[here](https://fastn-community.github.io/doc-site/#dart-used-by)** for
-inspiration.
-
-## fastn and Curious?
-
-Discover more of fastn here.
-
-- [Expander Crash Course](https://fastn.com/expander/)
-- [Video Tutorials](https://fastn.com/expander/hello-world/-/build/)
-- [Explore more Templates/ Components/ Package](https://fastn.com/featured/)
-
-## Become a fastn Contributor
-
-1.  Finish the [Expander Crash Course](https://fastn.com/expander/)
-2.  Share your progress and ideas on [Discord](https://discord.gg/bucrdvptYd).
-3.  Let our team guide you on your contributor journey.
-
-## Become a fastn-trailblazer
-
-- [Join our Discord Server](https://discord.gg/bucrdvptYd) to connect with other fastn enthusiasts and stay up to date with the latest developments.
-- [Star us on GitHub](https://github.com/fastn-stack/fastn/)
+`fastn-community.github.io/svg-icons` package can be used to add SVG icons by
+[Font-Awesome](https://fontawesome.com) and
+[Phosphor Icons](https://phosphoricons.com) projects.

index.ftd

@@ -7,9 +7,7 @@
 -- ftd.column:
 background.solid: $inherited.colors.background.base
 width: fill-container
-height: fill-container
 align-content: center
-padding.px: 20
 
 -- dms.dark-mode-switcher-float:
 
@@ -23,6 +21,8 @@ spacing.fixed.px: 20
 
 -- ds.copy-regular:
 
+Github: [fastn-community/svg-icons](https://github.com/fastn-community/svg-icons)
+
 Add dependency to your `FASTN.ftd` file:
 
 -- ftd.code:
@@ -38,20 +38,58 @@ And then use helpers from this module to show icons:
 -- ftd.code:
 lang: ftd
 
-\-- import: fastn-community.github.io/svg-icons/fa
+\-- import: fastn-community.github.io/svg-icons/phosphor
 
 \-- fa.brand: apple
 \-- fa.regular: bell
 size: 64
 
 -- ds.copy-regular:
 
-Font-Awesome component names you can get by browsing [this folder](https://github.com/FortAwesome/Font-Awesome/tree/6.x/svgs),
+[Font-Awesome](https://fontawesome.com) icon names you can get by browsing
+[this folder](https://github.com/FortAwesome/Font-Awesome/tree/6.x/svgs),
 it contains three folders, `brands`, which are accessed via e.g.
 `-- fa.brand: apple`, files in `regular` can be accessed using `fa.regular`, and
 `solid` via, you guessed it, `fa.solid`.
 
 
+-- ftd.code:
+lang: ftd
+
+\-- import: fastn-community.github.io/svg-icons/fa
+
+\-- phosphor.bold: app-store-logo
+size: 200
+
+\-- phosphor.duotone: alarm
+size: 100
+\-- phosphor.fill: airplay
+\-- phosphor.light: align-left
+
+-- ds.copy-regular:
+
+Similarly to use [Phosphor Icons](https://phosphoricons.com), visit [this
+folder](https://github.com/phosphor-icons/core/tree/main/raw) to get the name
+of icons. For each folder we have `phosphor.<folder-name>` components, eg
+`phosphor.bold` and so on.
+
+-- ds.heading-large: `size`
+
+-- ds.copy-regular:
+
+You can specify `size` property to any of these components to control their
+size. The default value of the size is `24px`.
+
+-- ds.heading-medium: `color`
+
+-- ds.copy-regular:
+
+You can add `color` property to the parent element where you are placing the
+icon. Or you can explicitly specify the `color`.
+
+-- ds.heading-medium: Demos
+
+
 -- ftd.column:
 color: $inherited.colors.cta-primary.base
 spacing.fixed.px: 20