readme

UI overhaul rebase
temp
2026-01-29 10:58:07 +01:00 · 2026-01-28 23:07:07 +01:00 · 2026-01-28 23:07:07 +01:00 · 2026-01-28 23:04:29 +01:00
132 changed files with 326734 additions and 1082 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -634,8 +634,7 @@ dependencies = [
 [[package]]
 name = "const-serialize"
 version = "0.8.0-alpha.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e42cd5aabba86f128b3763da1fec1491c0f728ce99245062cd49b6f9e6d235b"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "const-serialize 0.7.2",
 "const-serialize-macro 0.8.0-alpha.0",
@@ -656,8 +655,7 @@ dependencies = [
 [[package]]
 name = "const-serialize-macro"
 version = "0.8.0-alpha.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42571ed01eb46d2e1adcf99c8ca576f081e46f2623d13500eba70d1d99a4c439"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -1076,8 +1074,7 @@ dependencies = [
 [[package]]
 name = "dioxus"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "92b583b48ac77158495e6678fe3a2b5954fc8866fc04cb9695dd146e88bc329d"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-asset-resolver",
 "dioxus-cli-config",
@@ -1110,8 +1107,7 @@ dependencies = [
 [[package]]
 name = "dioxus-asset-resolver"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c0161af1d3cfc8ff31503ff1b7ee0068c97771fc38d0cc6566e23483142ddf4f"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-cli-config",
 "http",
@@ -1131,8 +1127,7 @@ dependencies = [
 [[package]]
 name = "dioxus-cli-config"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ccd67ab405e1915a47df9769cd5408545d1b559d5c01ce7a0f442caef520d1f3"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "wasm-bindgen",
 ]
@@ -1140,8 +1135,7 @@ dependencies = [
 [[package]]
 name = "dioxus-config-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f040ec7c41aa5428283f56bb0670afba9631bfe3ffd885f4814807f12c8c9d91"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -1150,14 +1144,12 @@ dependencies = [
 [[package]]
 name = "dioxus-config-macros"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "10c41b47b55a433b61f7c12327c85ba650572bacbcc42c342ba2e87a57975264"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"

 [[package]]
 name = "dioxus-core"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b389b0e3cc01c7da292ad9b884b088835fdd1671d45fbd2f737506152b22eef0"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "anyhow",
 "const_format",
@@ -1178,8 +1170,7 @@ dependencies = [
 [[package]]
 name = "dioxus-core-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6a82d65f0024fc86f01911a16156d280eea583be5a82a3bed85e7e8e4194302d"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "convert_case 0.8.0",
 "dioxus-rsx",
@@ -1191,14 +1182,12 @@ dependencies = [
 [[package]]
 name = "dioxus-core-types"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bfc4b8cdc440a55c17355542fc2089d97949bba674255d84cac77805e1db8c9f"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"

 [[package]]
 name = "dioxus-desktop"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e6ec66749d1556636c5b4f661495565c155a7f78a46d4d007d7478c6bdc288c"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "async-trait",
 "base64",
@@ -1252,8 +1241,7 @@ dependencies = [
 [[package]]
 name = "dioxus-devtools"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dcf89488bad8fb0f18b9086ee2db01f95f709801c10c68be42691a36378a0f2d"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-cli-config",
 "dioxus-core",
@@ -1272,8 +1260,7 @@ dependencies = [
 [[package]]
 name = "dioxus-devtools-types"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e7381d9d7d0a0f66b9d5082d584853c3d53be21d34007073daca98ddf26fc4d"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "serde",
@@ -1283,8 +1270,7 @@ dependencies = [
 [[package]]
 name = "dioxus-document"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ba0aeeff26d9d06441f59fd8d7f4f76098ba30ca9728e047c94486161185ceb"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "dioxus-core-macro",
@@ -1302,7 +1288,6 @@ dependencies = [
 [[package]]
 name = "dioxus-free-icons"
 version = "0.10.0"
-source = "git+https://github.com/matous-volf/dioxus-free-icons?rev=6488400003a3d6829e771a84a565c5c5f08a9aa0#6488400003a3d6829e771a84a565c5c5f08a9aa0"
 dependencies = [
 "dioxus",
 ]
@@ -1310,8 +1295,7 @@ dependencies = [
 [[package]]
 name = "dioxus-fullstack"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7db1f8b70338072ec408b48d09c96559cf071f87847465d8161294197504c498"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "anyhow",
 "async-stream",
@@ -1375,8 +1359,7 @@ dependencies = [
 [[package]]
 name = "dioxus-fullstack-core"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cda8b152e85121243741b9d5f2a3d8cb3c47a7b2299e902f98b6a7719915b0a2"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "anyhow",
 "axum-core",
@@ -1403,8 +1386,7 @@ dependencies = [
 [[package]]
 name = "dioxus-fullstack-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "255104d4a4f278f1a8482fa30536c91d22260c561c954b753e72987df8d65b2e"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "const_format",
 "convert_case 0.8.0",
@@ -1417,8 +1399,7 @@ dependencies = [
 [[package]]
 name = "dioxus-history"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8d00ba43bfe6e5ca226fef6128f240ca970bea73cac0462416188026360ccdcf"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "tracing",
@@ -1427,8 +1408,7 @@ dependencies = [
 [[package]]
 name = "dioxus-hooks"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dab2da4f038c33cb38caa37ffc3f5d6dfbc018f05da35b238210a533bb075823"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "dioxus-signals",
@@ -1443,8 +1423,7 @@ dependencies = [
 [[package]]
 name = "dioxus-html"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eded5fa6d2e677b7442a93f4228bf3c0ad2597a8bd3292cae50c869d015f3a99"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "async-trait",
 "bytes",
@@ -1470,8 +1449,7 @@ dependencies = [
 [[package]]
 name = "dioxus-html-internal-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45462ab85fe059a36841508d40545109fd0e25855012d22583a61908eb5cd02a"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "convert_case 0.8.0",
 "proc-macro2",
@@ -1482,8 +1460,6 @@ dependencies = [
 [[package]]
 name = "dioxus-i18n"
 version = "0.5.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ceebf715471a986307cdfe422d645c0784602003758171102ba9225624be9f55"
 dependencies = [
 "dioxus",
 "fluent",
@@ -1495,8 +1471,7 @@ dependencies = [
 [[package]]
 name = "dioxus-interpreter-js"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a42a7f73ad32a5054bd8c1014f4ac78cca3b7f6889210ee2b57ea31b33b6d32f"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "dioxus-core-types",
@@ -1515,8 +1490,7 @@ dependencies = [
 [[package]]
 name = "dioxus-liveview"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a3f7a1cfe6f8e9f2e303607c8ae564d11932fd80714c8a8c97e3860d55538997"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "axum",
 "dioxus-cli-config",
@@ -1543,8 +1517,7 @@ dependencies = [
 [[package]]
 name = "dioxus-logger"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f1eeab114cb009d9e6b85ea10639a18cfc54bb342f3b837770b004c4daeb89c2"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-cli-config",
 "tracing",
@@ -1555,8 +1528,7 @@ dependencies = [
 [[package]]
 name = "dioxus-router"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d5b31f9e27231389bf5a117b7074d22d8c58358b484a2558e56fbab20e64ca4"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-cli-config",
 "dioxus-core",
@@ -1576,8 +1548,7 @@ dependencies = [
 [[package]]
 name = "dioxus-router-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "838b9b441a95da62b39cae4defd240b5ebb0ec9f2daea1126099e00a838dc86f"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "base16",
 "digest",
@@ -1591,8 +1562,7 @@ dependencies = [
 [[package]]
 name = "dioxus-rsx"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53128858f0ccca9de54292a4d48409fda1df75fd5012c6243f664042f0225d68"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "proc-macro2",
 "proc-macro2-diagnostics",
@@ -1604,8 +1574,7 @@ dependencies = [
 [[package]]
 name = "dioxus-server"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8adb2d4e0f0f3a157bda6af2d90f22bac40070e509a66e3ea58abf3b35f904c"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "anyhow",
 "async-trait",
@@ -1662,8 +1631,7 @@ dependencies = [
 [[package]]
 name = "dioxus-signals"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2f48020bc23bc9766e7cce986c0fd6de9af0b8cbfd432652ec6b1094439c1ec6"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "futures-channel",
@@ -1678,8 +1646,7 @@ dependencies = [
 [[package]]
 name = "dioxus-ssr"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44cf9294a21fcd1098e02ad7a3ba61b99be8310ad3395fecf8210387c83f26b9"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "askama_escape",
 "dioxus-core",
@@ -1690,8 +1657,7 @@ dependencies = [
 [[package]]
 name = "dioxus-stores"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77aaa9ac56d781bb506cf3c0d23bea96b768064b89fe50d3b4d4659cc6bd8058"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-core",
 "dioxus-signals",
@@ -1702,8 +1668,7 @@ dependencies = [
 [[package]]
 name = "dioxus-stores-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b1a728622e7b63db45774f75e71504335dd4e6115b235bbcff272980499493a"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "convert_case 0.8.0",
 "proc-macro2",
@@ -1714,8 +1679,7 @@ dependencies = [
 [[package]]
 name = "dioxus-web"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b33fe739fed4e8143dac222a9153593f8e2451662ce8fc4c9d167a9d6ec0923"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dioxus-cli-config",
 "dioxus-core",
@@ -2345,8 +2309,7 @@ dependencies = [
 [[package]]
 name = "generational-box"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc4ed190b9de8e734d47a70be59b1e7588b9e8e0d0036e332f4c014e8aed1bc5"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "parking_lot",
 "tracing",
@@ -3150,8 +3113,7 @@ dependencies = [
 [[package]]
 name = "lazy-js-bundle"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c7b88b715ab1496c6e6b8f5e927be961c4235196121b6ae59bcb51077a21dd36"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"

 [[package]]
 name = "lazy_static"
@@ -3333,8 +3295,7 @@ dependencies = [
 [[package]]
 name = "manganis"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6cce7d688848bf9d034168513b9a2ffbfe5f61df2ff14ae15e6cfc866efdd344"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "const-serialize 0.7.2",
 "const-serialize 0.8.0-alpha.0",
@@ -3345,8 +3306,7 @@ dependencies = [
 [[package]]
 name = "manganis-core"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84ce917b978268fe8a7db49e216343ec7c8f471f7e686feb70940d67293f19d4"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "const-serialize 0.7.2",
 "const-serialize 0.8.0-alpha.0",
@@ -3359,8 +3319,7 @@ dependencies = [
 [[package]]
 name = "manganis-macro"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad513e990f7c0bca86aa68659a7a3dc4c705572ed4c22fd6af32ccf261334cc2"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "dunce",
 "macro-string",
@@ -5144,8 +5103,7 @@ checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 [[package]]
 name = "subsecond"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8438668e545834d795d04c4335aafc332ce046106521a29f0a5c6501de34187c"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "js-sys",
 "libc",
@@ -5163,8 +5121,7 @@ dependencies = [
 [[package]]
 name = "subsecond-types"
 version = "0.7.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e72f747606fc19fe81d6c59e491af93ed7dcbcb6aad9d1d18b05129914ec298"
+source = "git+https://github.com/matous-volf/dioxus?rev=627d5ca5b80aeed57c23e253024665f103117f5e#627d5ca5b80aeed57c23e253024665f103117f5e"
 dependencies = [
 "serde",
 ]
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -9,9 +9,9 @@ edition = "2024"
 [dependencies]
 chrono = { version = "0.4.43", features = ["serde", "unstable-locales"] }
 # Remember to update the CLI as well.
-dioxus = { version = "0.7.3", features = ["fullstack", "router"] }
+dioxus = { git = "https://github.com/matous-volf/dioxus", rev = "627d5ca5b80aeed57c23e253024665f103117f5e", features = ["fullstack", "router"] }
 # TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4765 is resolved.
-dioxus-html = { version = "0.7.3", features = ["serialize"] }
+dioxus-html = { git = "https://github.com/matous-volf/dioxus", rev = "627d5ca5b80aeed57c23e253024665f103117f5e", features = ["serialize"] }
 feruca = { version = "0.11.5" }
 serde = { version = "1.0.228" }
 serde_json = { version = "1.0.149" }
@@ -35,11 +35,11 @@ time = { version = "0.3.45", optional = true }
 tokio = { version = "1.49.0", optional = true }

 async-std = { version = "1.13.2", optional = true }
-dioxus-i18n = "0.5.1"
+dioxus-i18n = { path = "dioxus-i18n" }
 voca_rs = "1.15.2"
 load-dotenv = "0.1.2"
 # TODO: Switch to upstream once it merges the changes.
-dioxus-free-icons = { git = "https://github.com/matous-volf/dioxus-free-icons", rev = "6488400003a3d6829e771a84a565c5c5f08a9aa0", features = [
+dioxus-free-icons = { path = "dioxus-free-icons/packages/lib", features = [
    "font-awesome-regular",
    "font-awesome-solid",
 ] }
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/images/icon.png
+++ b/assets/images/icon.png
--- a/assets/images/icon.svg
+++ b/assets/images/icon.svg
@@ -1,203 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="icon.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     inkscape:zoom="1.1020922"
-     inkscape:cx="188.27826"
-     inkscape:cy="204.15715"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1">
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect2"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect1"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="display:inline;fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-       id="rect1"
-       width="512"
-       height="512"
-       x="0"
-       y="0"
-       sodipodi:insensitive="true"
-       inkscape:label="background"
-       ry="128.00018"
-       sodipodi:type="rect"
-       rx="129.98714" />
-    <g
-       id="g17"
-       inkscape:label="logo"
-       transform="translate(8)">
-      <g
-         id="g8"
-         inkscape:label="ring">
-        <g
-           id="g7"
-           inkscape:label="back">
-          <circle
-             style="fill:#d97706;fill-opacity:1;stroke:#d97706;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1"
-             cx="224"
-             cy="256"
-             r="128"
-             inkscape:label="ring back" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:21.8936;stroke-dasharray:none;stroke-opacity:1"
-             id="rect2"
-             width="48"
-             height="288"
-             x="224"
-             y="112"
-             inkscape:label="rect2" />
-        </g>
-        <g
-           id="g1"
-           transform="translate(-4.163147,-0.69235229)"
-           inkscape:label="front">
-          <circle
-             style="fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5-2"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-          <circle
-             style="fill:none;fill-opacity:1;stroke:#fbbf24;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-        </g>
-      </g>
-      <g
-         id="g16"
-         inkscape:label="tick"
-         transform="translate(16.000231,-8.3918418e-5)">
-        <g
-           id="g6"
-           transform="rotate(45,-57.96574,415.4208)"
-           style="fill:#d97706;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="back">
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect9"
-             width="32.000458"
-             height="32"
-             x="273.94067"
-             y="210.74516"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect8"
-             width="32.000458"
-             height="32"
-             x="206.05841"
-             y="233.37257"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect7"
-             height="16"
-             x="228.686"
-             y="285.255"
-             width="32"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect5"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect6"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-        <g
-           id="g4"
-           transform="rotate(45,-41.965512,454.04877)"
-           style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="front">
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect3"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect4"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
--- a/assets/manifest.json
+++ b/assets/manifest.json
@@ -3,8 +3,8 @@
  "short_name": "Todo Baggins",
  "start_url": "/",
  "display": "standalone",
-  "background_color": "#27272a",
-  "theme_color": "#27272a",
+  "background_color": "#101828",
+  "theme_color": "#b89a2e",
  "icons": [
    {
      "src": "/assets/images/icon.png",
--- a/assets/styles/input_range.css
+++ b/assets/styles/input_range.css
@@ -8,56 +8,37 @@ input[type="range"] {
  background: transparent;
 }

-input[type="range"]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb,
+input[type="range"]::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
-  background: rgba(228 228 231);
+  background: var(--color-gray-400);
+  filter: drop-shadow(0 var(--spacing) 0 var(--color-gray-500));
  border: 0;
  border-radius: 0.5rem;
+  cursor: pointer;
 }

-input[type="range"]::-moz-range-progress {
-  background: #525259;
+input[type="range"]::-webkit-slider-thumb {
+  position: relative;
+  top: -9px;
+}
+
+input[type="range"]::-moz-range-track,
+input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--color-gray-800-muted);
  height: 0.5rem;
+  filter: drop-shadow(
+    0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted)
+  );
  border-radius: 0.25rem;
 }

 input[type="range"]::-moz-range-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-progress {
-  background: #2d2d31;
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-track {
-  background: rgba(113 113 122 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  width: 1.25rem;
-  height: 1.25rem;
-  background: rgba(228 228 231);
-  border: 0;
-  border-radius: 0.5rem;
-  position: relative;
-  top: -0.4rem;
+  transform: translateY(3px);
 }

 input[type="range"]::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  position: relative;
+  top: 3px;
 }
--- a/assets/styles/select_arrow.css
+++ b/assets/styles/select_arrow.css
@@ -0,0 +1,7 @@
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239ca3af' d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  background-position: right 0.5rem center;
+}
--- a/dioxus-free-icons/.github/release-drafter.yml
+++ b/dioxus-free-icons/.github/release-drafter.yml
@@ -0,0 +1,48 @@
+name-template: "Release v$RESOLVED_VERSION 🦀"
+tag-template: "v$RESOLVED_VERSION"
+categories:
+  - title: "🚀 Features"
+    label: "feature"
+  - title: "🐛 Bug Fixes"
+    label: "bug"
+  - title: "♻️ Refactor"
+    label: "refactor"
+  - title: "📝 Documentation"
+    label: "documentation"
+  - title: "🧰 Maintenance"
+    labels:
+      - "chore"
+      - "dependencies"
+change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
+change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
+version-resolver:
+  major:
+    labels:
+      - "major"
+  minor:
+    labels:
+      - "minor"
+  patch:
+    labels:
+      - "patch"
+  default: patch
+template: |
+  ## Changes
+
+  $CHANGES
+autolabeler:
+  - label: feature
+    branch:
+      - "/^feat(ure)?[/-].+/"
+  - label: bug
+    branch:
+      - "/^fix[/-].+/"
+  - label: refactor
+    branch:
+      - "/(refactor|refactoring)[/-].+/"
+  - label: documentation
+    branch:
+      - "/doc(s|umentation)[/-].+/"
+  - label: chore
+    branch:
+      - "/^chore[/-].+/"
--- a/dioxus-free-icons/.github/workflows/ci.yml
+++ b/dioxus-free-icons/.github/workflows/ci.yml
@@ -0,0 +1,25 @@
+name: Cargo Build & Test
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ "main" ]
+  pull_request:
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  build_and_test:
+    name: Rust project - latest
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install the nightly toolchain
+        uses: dtolnay/rust-toolchain@nightly
+      - name: Install linux dependencies
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt update && sudo apt install build-essential libssl-dev pkg-config libglib2.0-dev libgtk-3-dev
+      - run: cargo build --verbose
+      - run: cargo test --verbose
--- a/dioxus-free-icons/.github/workflows/publish.yml
+++ b/dioxus-free-icons/.github/workflows/publish.yml
@@ -0,0 +1,19 @@
+name: Cargo Publish
+
+on:
+  release:
+    types: [published]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  publish:
+    name: Publish to crate.io
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: cargo publish
+        working-directory: ./packages/lib
+        env:
+          CARGO_REGISTRY_TOKEN: ${{ secrets.CARGO_REGISTRY_TOKEN }}
--- a/dioxus-free-icons/.github/workflows/release-drafter.yml
+++ b/dioxus-free-icons/.github/workflows/release-drafter.yml
@@ -0,0 +1,23 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - main
+  # pull_request event is required only for autolabeler
+  pull_request:
+    # Only following types are handled by the action, but one can default to all as well
+    types: [opened, reopened, synchronize]
+  # pull_request_target event is required for autolabeler to support PRs from forks
+  # pull_request_target:
+  #   types: [opened, reopened, synchronize]
+
+jobs:
+  update_release_draft:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/dioxus-free-icons/.gitignore
+++ b/dioxus-free-icons/.gitignore
@@ -0,0 +1,16 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+
+# Added by cargo
+
+/target
+/Cargo.lock
--- a/dioxus-free-icons/.gitmodules
+++ b/dioxus-free-icons/.gitmodules
@@ -0,0 +1,27 @@
+[submodule "icon_resources/font-awesome"]
+	path = icon_resources/font-awesome
+	url = https://github.com/FortAwesome/Font-Awesome
+[submodule "icon_resources/heroicons"]
+	path = icon_resources/heroicons
+	url = https://github.com/tailwindlabs/heroicons
+[submodule "icon_resources/ionicons"]
+	path = icon_resources/ionicons
+	url = https://github.com/ionic-team/ionicons
+[submodule "icon_resources/octicons"]
+	path = icon_resources/octicons
+	url = https://github.com/primer/octicons
+[submodule "icon_resources/bootstrap"]
+	path = icon_resources/bootstrap
+	url = https://github.com/twbs/icons
+[submodule "icon_resources/feather"]
+	path = icon_resources/feather
+	url = https://github.com/feathericons/feather
+[submodule "icon_resources/lucide"]
+	path = icon_resources/lucide
+	url = https://github.com/lucide-icons/lucide
+[submodule "icon_resources/material-design-icons"]
+	path = icon_resources/material-design-icons
+	url = https://github.com/google/material-design-icons
+[submodule "icon_resources/vscode-codicons"]
+	path = icon_resources/vscode-codicons
+	url = https://github.com/microsoft/vscode-codicons.git
--- a/dioxus-free-icons/Cargo.toml
+++ b/dioxus-free-icons/Cargo.toml
@@ -0,0 +1,24 @@
+# monorepo only work when using virtual manifest
+# see: https://github.com/rust-lang/cargo/issues/7467#issuecomment-867632379
+[workspace]
+resolver = "2"
+members = ["packages/codegen", "packages/example", "packages/lib"]
+
+[workspace.dependencies]
+dioxus = { git = "https://github.com/matous-volf/dioxus", rev = "627d5ca5b80aeed57c23e253024665f103117f5e", default-features = false, features = [
+    "html",
+    "macro",
+    "signals",
+] }
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"
--- a/dioxus-free-icons/LICENSE
+++ b/dioxus-free-icons/LICENSE
@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2022-Present Daiki Nishikawa
+
+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.
+
+---
+Icons are taken from the other projects
+so please check each project licences accordingly.
--- a/dioxus-free-icons/README.md
+++ b/dioxus-free-icons/README.md
@@ -0,0 +1,117 @@
+[![Discord Server](https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square)](https://discord.gg/sKJSVNSCDJ)
+[![Crates.io](https://img.shields.io/crates/v/dioxus-free-icons)](https://crates.io/crates/dioxus-free-icons)
+
+# dioxus-free-icons 🙂
+
+Use free svg icons in your [Dioxus](https://dioxuslabs.com/) projects easily with dioxus-free-icons.
+
+More information about this crate can be found in the [crate documentation](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/).
+
+## Install
+
+To use `dioxus-free-icons`, add this to your Cargo.toml:
+
+```toml
+[dependencies]
+dioxus-free-icons = { version = "0.9", features = ["font-awesome-brands"] }
+```
+
+### Support features
+
+The following features are available. Please see [react-icons site](https://react-icons.github.io/react-icons) to check the icon name and icon design. 
+
+- [bootstrap](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/bs_icons/index.html)
+- [codicons](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/vs_icons/index.html)
+- [font-awesome-brands](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/fa_brands_icons/index.html)
+- [font-awesome-regular](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/fa_regular_icons/index.html)
+- [font-awesome-solid](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/fa_solid_icons/index.html)
+- [feather](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/fi_icons/index.html)
+- [octicons](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/go_icons/index.html)
+- [hero-icons-outline](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/hi_outline_icons/index.html)
+- [hero-icons-solid](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/hi_solid_icons/index.html)
+- [ionicons](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/io_icons/index.html)
+- [lucide](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/ld_icons/index.html)
+- [material-design-icons-action](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_action_icons/index.html)
+- [material-design-icons-alert](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_alert_icons/index.html)
+- [material-design-icons-av](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_av_icons/index.html)
+- [material-design-icons-communication](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_communication_icons/index.html)
+- [material-design-icons-content](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_content_icons/index.html)
+- [material-design-icons-device](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/io_icons/index.html)
+- [material-design-icons-editor](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_editor_icons/index.html)
+- [material-design-icons-file](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_file_icons/index.html)
+- [material-design-icons-hardware](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_hardware_icons/index.html)
+- [material-design-icons-home](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_home_icons/index.html)
+- [material-design-icons-image](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_image_icons/index.html)
+- [material-design-icons-maps](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_maps_icons/index.html)
+- [material-design-icons-navigation](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_navigation_icons/index.html)
+- [material-design-icons-notification](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_notification_icons/index.html)
+- [material-design-icons-places](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_places_icons/index.html)
+- [material-design-icons-social](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_social_icons/index.html)
+- [material-design-icons-toggle](https://docs.rs/dioxus-free-icons/latest/dioxus_free_icons/icons/md_toggle_icons/index.html)
+
+## Example
+
+This library provides Icon component, which will generate SVG for a Font Awesome icon.
+
+```rust
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_brands_icons::FaRust;
+use dioxus_free_icons::Icon;
+
+fn RustIcon() -> Element {
+    rsx!(
+        Icon {
+            width: 30,
+            height: 30,
+            fill: "black",
+            icon: FaRust,
+        }
+    )
+}
+```
+
+## License
+
+This project is licensed under the MIT license.
+
+### Icon
+
+Icon Library|License|Version
+---|---|---
+[Bootstrap Icons](https://icons.getbootstrap.com/)|[MIT License](https://github.com/twbs/icons/blob/main/LICENSE.md)| [1.8.3](https://github.com/twbs/icons/tree/v1.8.3)
+[Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html)|[MIT License](https://github.com/microsoft/vscode-codicons/blob/main/LICENSE-CODE) & [CC BY 4.0 License](https://github.com/microsoft/vscode-codicons/blob/main/LICENSE) | [0.0.36](https://github.com/microsoft/vscode-codicons/tree/0.0.36)
+[Feather](https://feathericons.com/)|[MIT License](https://github.com/feathericons/feather/blob/master/LICENSE)| [4.29.0](https://github.com/feathericons/feather/tree/v4.29.0)
+[Font Awesome](https://fontawesome.com/)|[CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)| [7.1.0](https://github.com/FortAwesome/Font-Awesome/tree/7.1.0)
+[Heroicons](https://heroicons.com/)|[MIT License](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)| [1.0.6](https://github.com/tailwindlabs/heroicons/tree/v1.0.6)
+[Ionicons](https://ionic.io/ionicons)|[MIT License](https://github.com/ionic-team/ionicons/blob/main/LICENSE)| [6.0.2](https://github.com/ionic-team/ionicons/tree/v6.0.2)
+[Lucide](https://lucide.dev)|[ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE)| [0.555.0](https://github.com/lucide-icons/lucide/tree/v0.555.0)
+[Material Design icons](https://developers.google.com/fonts/docs/material_icons)|[Apache License 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)| [4.0.0](https://github.com/google/material-design-icons/tree/4.0.0)
+[Octicons](https://primer.style/octicons/)|[MIT License](https://github.com/primer/octicons/blob/main/LICENSE)| [17.3.0](https://github.com/primer/octicons/tree/v17.3.0)
+
+## Contribution
+
+The project welcomes all contributions from anyone willing to work in good faith with other contributors and the community. 
+In particular, contributions regarding support for other free icons such as Material Design icons or Ionicons are welcome. 
+This library aims to be a react-icons-like library for dioxus projects.
+
+### Development
+
+```sh
+// generate icon files
+cd packages/codegen
+cargo run
+```
+
+### Preview
+
+```sh
+cd packages/exmaple
+cargo install dioxus-cli
+dx serve
+```
+
+### Update icons
+
+1. checkout a new tag in the icon resource submodule
+2. create new icon files
+3. Update README.md and check the LICENSE
--- a/dioxus-free-icons/packages/codegen/Cargo.toml
+++ b/dioxus-free-icons/packages/codegen/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "dioxus-fontawesome-examples"
+version = "0.2.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+codegen = "0.1.3"
+heck = "0.4.0"
+regex = "1.6.0"
+scraper = "0.13.0"
+walkdir = "2.3.2"
--- a/dioxus-free-icons/packages/codegen/src/create_icon_file.rs
+++ b/dioxus-free-icons/packages/codegen/src/create_icon_file.rs
@@ -0,0 +1,215 @@
+use std::fs;
+use std::fs::File;
+use std::io::Write;
+use std::path::PathBuf;
+use std::{ffi::OsStr, path::Path};
+
+use heck::ToSnakeCase;
+use heck::ToUpperCamelCase;
+use regex::Regex;
+use scraper::node::Element;
+use scraper::ElementRef;
+use scraper::Html;
+use walkdir::WalkDir;
+
+const ICON_TEMPLATE: &str = r#"#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct {ICON_NAME};
+impl IconShape for {ICON_NAME} {
+    fn view_box(&self) -> &str {
+        "{VIEW_BOX}"
+    }
+    fn xmlns(&self) -> &str {
+        "{XMLNS}"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        ({FILL_COLOR}, {STROKE_COLOR}, {STROKE_WIDTH})
+    }
+    fn stroke_linecap(&self) -> &str {
+        "{STROKE_LINECAP}"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "{STROKE_LINEJOIN}"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+{CHILD_ELEMENTS}
+        }
+    }
+}
+"#;
+
+pub fn create_icon_file(svg_path: &str, output_path: &str, icon_prefix: &str) {
+    let files = collect_svg_files(svg_path, icon_prefix);
+    
+    let icon_file = files
+        .into_iter()
+        .map(|file| {
+            let svg_str = fs::read_to_string(&file).unwrap();
+            let fragment = Html::parse_fragment(&svg_str);
+
+            let elements = fragment
+                .tree
+                .nodes()
+                .filter_map(|node| {
+                    if node.value().is_element() {
+                        let element = ElementRef::wrap(node).unwrap().value();
+                        if !element.attrs.is_empty() {
+                            return Some(element);
+                        }
+                    }
+                    None
+                })
+                .collect::<Vec<_>>();
+
+            let svg_element = &elements[0];
+            let svg_child_elements = &elements[1..];
+            let icon_name = icon_name(&file, icon_prefix);
+            let (view_box, xmlns) = extract_svg_attrs(svg_element);
+            let child_elements = extract_svg_child_elements(svg_child_elements, icon_prefix);
+            let (fill_color, stroke_color, stroke_width) = extract_svg_colors(icon_prefix);
+            let stroke_linecap = extract_stroke_linecap(icon_prefix);
+            let stroke_linejoin = extract_stroke_linejoin(icon_prefix);
+
+            ICON_TEMPLATE
+                .replace("{ICON_NAME}", &format!("{}{}", icon_prefix, &icon_name))
+                .replace("{VIEW_BOX}", &view_box)
+                .replace("{XMLNS}", &xmlns)
+                .replace("{CHILD_ELEMENTS}", &child_elements)
+                .replace("{FILL_COLOR}", &fill_color)
+                .replace("{STROKE_COLOR}", &stroke_color)
+                .replace("{STROKE_WIDTH}", &stroke_width)
+                .replace("{STROKE_LINECAP}", &stroke_linecap)
+                .replace("{STROKE_LINEJOIN}", &stroke_linejoin)
+        })
+        .collect::<Vec<_>>()
+        .join("\n");
+
+    // write to file
+    let mut file = File::create(output_path).unwrap();
+    file.write_all(
+        format!(
+            "{}\n\n{}",
+            "use super::super::IconShape;\nuse dioxus::prelude::*;", icon_file
+        )
+        .as_bytes(),
+    )
+    .unwrap();
+    file.flush().unwrap();
+}
+
+fn collect_svg_files(svg_path: &str, icon_prefix: &str) -> Vec<PathBuf> {
+    let dir_entries = WalkDir::new(svg_path)
+        .sort_by_file_name()
+        .into_iter()
+        .filter_map(|e| e.ok())
+        .collect::<Vec<_>>();
+
+    dir_entries
+        .into_iter()
+        .filter(|e| match icon_prefix {
+            "Go" => {
+                let re = Regex::new(r".*-16.svg$").unwrap();
+                return re.is_match(e.path().to_str().unwrap());
+            }
+            "Md" => {
+                let split_vec = e.path().components().collect::<Vec<_>>();
+                return split_vec.iter().any(|c| c.as_os_str() == "materialicons")
+                    && e.file_name().to_str().unwrap() == "24px.svg";
+            }
+            _ => return e.path().extension() == Some(OsStr::new("svg")),
+        })
+        .map(|dir| PathBuf::from(dir.path()))
+        .collect::<Vec<_>>()
+}
+
+fn icon_name(path: &Path, icon_prefix: &str) -> String {
+    match icon_prefix {
+        "Go" => {
+            let filename = path.file_name().unwrap().to_str().unwrap();
+            let name = filename.split('.').next().unwrap();
+            name.replace("-16", "").to_upper_camel_case()
+        }
+        "Md" => {
+            let split_vec = path.components().collect::<Vec<_>>();
+            let name = split_vec[split_vec.len() - 3];
+            name.as_os_str().to_str().unwrap().to_upper_camel_case()
+        }
+        _ => {
+            let filename = path.file_name().unwrap().to_str().unwrap();
+            let name = filename.split('.').next().unwrap();
+            name.to_upper_camel_case()
+        }
+    }
+}
+
+fn extract_svg_attrs(element: &Element) -> (String, String) {
+    let view_box = element.attr("viewBox").unwrap_or("0 0 16 16");
+    let xmlns = element
+        .attr("xmlns")
+        .unwrap_or("http://www.w3.org/2000/svg");
+    (String::from(view_box), String::from(xmlns))
+}
+
+fn extract_svg_colors(icon_prefix: &str) -> (&str, &str, &str) {
+    match icon_prefix {
+        "Fi" => ("\"none\"", "user_color", "\"2\""),
+        "Ld" => ("\"none\"", "user_color", "\"2\""),
+        "Io" => ("user_color", "user_color", "\"0\""),
+        _ => ("user_color", "\"none\"", "\"0\""),
+    }
+}
+
+fn extract_stroke_linecap(icon_prefix: &str) -> &str {
+    match icon_prefix {
+        "Ld" => "round",
+        "Fi" => "round",
+        _ => "butt",
+    }
+}
+
+fn extract_stroke_linejoin(icon_prefix: &str) -> &str {
+    match icon_prefix {
+        "Ld" => "round",
+        "Fi" => "round",
+        _ => "miter",
+    }
+}
+
+fn extract_svg_child_elements(elements: &[&Element], icon_prefix: &str) -> String {
+    let elements = match icon_prefix {
+        "Md" => &elements[1..],
+        _ => elements,
+    };
+    elements
+        .iter()
+        .map(|element| {
+            let tag_name = element.name();
+            let mut element_attrs = element
+                .attrs()
+                .filter_map(|(name, value)| {
+                    let value = if icon_prefix == "Io" {
+                        value.replace("fill:none;stroke:#000;", "")
+                    } else {
+                        value.to_string()
+                    };
+                    let re = Regex::new(r"^data-.*$").unwrap();
+                    if !re.is_match(name) && name != "fill" {
+                        Some(format!(
+                            "                {}: \"{}\",",
+                            name.to_snake_case(),
+                            value
+                        ))
+                    } else {
+                        None
+                    }
+                })
+                .collect::<Vec<_>>();
+            element_attrs.sort();
+            let attrs_str = element_attrs.join("\n");
+            "            {TAG_NAME} {\n{ATTRS}\n            }"
+                .replace("{TAG_NAME}", tag_name)
+                .replace("{ATTRS}", &attrs_str)
+        })
+        .collect::<Vec<_>>()
+        .join("\n")
+}
--- a/dioxus-free-icons/packages/codegen/src/main.rs
+++ b/dioxus-free-icons/packages/codegen/src/main.rs
@@ -0,0 +1,79 @@
+mod create_icon_file;
+
+fn main() {
+    const OUTPUT_BASE_PATH: &str = "../lib/src/icons";
+
+    // create font awesome icons
+    const FA_SVG_BASE_PATH: &str = "../../icon_resources/font-awesome/svgs";
+    for icon_type in vec!["brands", "regular", "solid"].into_iter() {
+        let svg_path = format!("{}/{}", FA_SVG_BASE_PATH, icon_type);
+        let output_path = format!("{}/fa_{}_icons.rs", OUTPUT_BASE_PATH, icon_type);
+        create_icon_file::create_icon_file(&svg_path, &output_path, "Fa");
+    }
+
+    // create hero icons
+    const HI_SVG_BASE_PATH: &str = "../../icon_resources/heroicons/src";
+    for icon_type in vec!["outline", "solid"].into_iter() {
+        let svg_path = format!("{}/{}", HI_SVG_BASE_PATH, icon_type);
+        let output_path = format!("{}/hi_{}_icons.rs", OUTPUT_BASE_PATH, icon_type);
+        create_icon_file::create_icon_file(&svg_path, &output_path, "Hi");
+    }
+
+    // create ionicons
+    const IO_SVG_BASE_PATH: &str = "../../icon_resources/ionicons/src/svg";
+    let output_path = format!("{}/io_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(IO_SVG_BASE_PATH, &output_path, "Io");
+
+    // create octicons
+    const GO_SVG_BASE_PATH: &str = "../../icon_resources/octicons/icons";
+    let go_output_path = format!("{}/go_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(GO_SVG_BASE_PATH, &go_output_path, "Go");
+
+    // create bootstrap icons
+    const BS_SVG_BASE_PATH: &str = "../../icon_resources/bootstrap/icons";
+    let bs_output_path = format!("{}/bs_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(BS_SVG_BASE_PATH, &bs_output_path, "Bs");
+
+    // create feather icons
+    const FI_SVG_BASE_PATH: &str = "../../icon_resources/feather/icons";
+    let fi_output_path = format!("{}/fi_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(FI_SVG_BASE_PATH, &fi_output_path, "Fi");
+
+    // create feather icons
+    const LD_SVG_BASE_PATH: &str = "../../icon_resources/lucide/icons";
+    let ld_output_path = format!("{}/ld_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(LD_SVG_BASE_PATH, &ld_output_path, "Ld");
+
+    // create material design icons
+    const MI_SVG_BASE_PATH: &str = "../../icon_resources/material-design-icons/src";
+    for icon_type in vec![
+        "action",
+        "alert",
+        "av",
+        "communication",
+        "content",
+        "device",
+        "editor",
+        "file",
+        "hardware",
+        "home",
+        "image",
+        "maps",
+        "navigation",
+        "notification",
+        "places",
+        "social",
+        "toggle",
+    ]
+    .into_iter()
+    {
+        let svg_path = format!("{}/{}", MI_SVG_BASE_PATH, icon_type);
+        let output_path = format!("{}/md_{}_icons.rs", OUTPUT_BASE_PATH, icon_type);
+        create_icon_file::create_icon_file(&svg_path, &output_path, "Md");
+    }
+
+    // create vscode-codicons
+    const VS_SVG_BASE_PATH: &str = "../../icon_resources/vscode-codicons/src/icons";
+    let vs_output_path = format!("{}/vsc_icons.rs", OUTPUT_BASE_PATH);
+    create_icon_file::create_icon_file(VS_SVG_BASE_PATH, &vs_output_path, "Vsc");
+}
--- a/dioxus-free-icons/packages/example/.gitignore
+++ b/dioxus-free-icons/packages/example/.gitignore
@@ -0,0 +1,17 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+
+# Added by cargo
+
+/target
+
+/dist
--- a/dioxus-free-icons/packages/example/Cargo.toml
+++ b/dioxus-free-icons/packages/example/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "hello-dioxus"
+version = "0.1.0"
+authors = ["nissy-dev <nd.12021218@gmail.com>"]
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["launch", "web"] }
+dioxus-free-icons = { path = "../lib", features = ["font-awesome-brands"] }
+
+log = "0.4.6"
+
+# WebAssembly Debug
+wasm-logger = "0.2.0"
+console_error_panic_hook = "0.1.7"
+
+[profile.release]
+lto = true
+opt-level = 's'
--- a/dioxus-free-icons/packages/example/Dioxus.toml
+++ b/dioxus-free-icons/packages/example/Dioxus.toml
@@ -0,0 +1,42 @@
+[application]
+
+# App (Project) Name
+name = "hello-dioxus"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []
--- a/dioxus-free-icons/packages/example/LICENSE
+++ b/dioxus-free-icons/packages/example/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-Present Daiki Nishikawa
+
+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.
--- a/dioxus-free-icons/packages/example/README.md
+++ b/dioxus-free-icons/packages/example/README.md
@@ -0,0 +1,11 @@
+# Example
+
+> a template for starting a dioxus project to be used with [dioxus-cli](https://github.com/DioxusLabs/cli)
+
+## Usage
+
+#### Start a `dev-server` for the project:
+
+```
+dioxus serve
+```
--- a/dioxus-free-icons/packages/example/public/.gitkeep
+++ b/dioxus-free-icons/packages/example/public/.gitkeep
--- a/dioxus-free-icons/packages/example/src/main.rs
+++ b/dioxus-free-icons/packages/example/src/main.rs
@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+
+use dioxus_free_icons::icons::fa_brands_icons::FaRust;
+use dioxus_free_icons::Icon;
+
+fn main() {
+    // init debug tool for WebAssembly
+    wasm_logger::init(wasm_logger::Config::default());
+    console_error_panic_hook::set_once();
+
+    launch(app);
+}
+
+fn app() -> Element {
+    rsx! (
+        div {
+            style: "text-align: center;",
+            h1 { "🌗 Dioxus 🚀" }
+            h3 { "Frontend that scales." }
+            p { "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust." },
+            Icon {
+                width: 60,
+                height: 60,
+                icon: FaRust,
+            }
+        }
+    )
+}
--- a/dioxus-free-icons/packages/lib/Cargo.toml
+++ b/dioxus-free-icons/packages/lib/Cargo.toml
@@ -0,0 +1,45 @@
+[package]
+name = "dioxus-free-icons"
+version = "0.10.0"
+edition = "2021"
+authors = ["Daiki Nishikawa <nd.12021218@gmail.com>", "Marc Espín <mespinsanz@gmail.com>"]
+description = "Use free svg icons in your Dioxus projects easily with dioxus-free-icons."
+license = "MIT"
+repository = "https://github.com/dioxus-community/dioxus-free-icons"
+readme = "../../README.md"
+
+[dependencies]
+dioxus = { workspace = true }
+
+[features]
+font-awesome-brands = []
+font-awesome-regular = []
+font-awesome-solid = []
+bootstrap = []
+feather = []
+octicons = []
+hero-icons-outline = []
+hero-icons-solid = []
+ionicons = []
+lucide = []
+material-design-icons-action = []
+material-design-icons-alert = []
+material-design-icons-av = []
+material-design-icons-communication = []
+material-design-icons-content = []
+material-design-icons-device = []
+material-design-icons-editor = []
+material-design-icons-file = []
+material-design-icons-hardware = []
+material-design-icons-home = []
+material-design-icons-image = []
+material-design-icons-maps = []
+material-design-icons-navigation = []
+material-design-icons-notification = []
+material-design-icons-places = []
+material-design-icons-social = []
+material-design-icons-toggle = []
+codicons = []
+
+[package.metadata.docs.rs]
+all-features = true
--- a/dioxus-free-icons/packages/lib/LICENSE
+++ b/dioxus-free-icons/packages/lib/LICENSE
@@ -0,0 +1,46 @@
+MIT License
+
+Copyright (c) 2022-Present Daiki Nishikawa
+
+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.
+
+---
+Icons are taken from the Font Awesome projects,
+so please check the project license accordingly.
+
+Bootstrap Icons - https://github.com/twbs/icons
+License: MIT License https://github.com/twbs/icons/blob/main/LICENSE.md
+
+Feather - https://feathericons.com/
+License: MIT https://github.com/feathericons/feather/blob/master/LICENSE
+
+Font Awesome - https://fontawesome.com/
+License: CC BY 4.0 License https://fontawesome.com/license/free
+
+Heroicons - https://heroicons.com/
+License: MIT License https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+
+Ionicons - https://ionic.io/ionicons/
+License: MIT License https://github.com/ionic-team/ionicons/blob/main/LICENSE
+
+Material Design icons - https://developers.google.com/fonts/docs/material_icons
+License: Apache License 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE
+
+Octicons - https://primer.style/octicons/
+License: MIT https://github.com/primer/octicons/blob/master/LICENSE
--- a/dioxus-free-icons/packages/lib/src/icon_component.rs
+++ b/dioxus-free-icons/packages/lib/src/icon_component.rs
@@ -0,0 +1,65 @@
+use dioxus::prelude::*;
+
+/// Icon shape trait
+pub trait IconShape {
+    fn view_box(&self) -> &str;
+    fn xmlns(&self) -> &str;
+    fn child_elements(&self) -> Element;
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        ("none", user_color, "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+}
+
+/// Icon component Props
+#[derive(PartialEq, Props, Clone)]
+pub struct IconProps<T: IconShape + Clone + PartialEq + 'static> {
+    /// The icon shape to use.
+    pub icon: T,
+    /// The height of the `<svg>` element. Defaults to 20. Pass None to omit.
+    #[props(default = Some(20))]
+    pub height: Option<u32>,
+    /// The width of the `<svg>` element. Defaults to 20. Pass None to omit.
+    #[props(default = Some(20))]
+    pub width: Option<u32>,
+    /// The color to use for filling the icon. Defaults to "currentColor".
+    #[props(default = "currentColor".to_string())]
+    pub fill: String,
+    /// An class for the `<svg>` element.
+    #[props(default = "".to_string())]
+    pub class: String,
+    /// An accessible, short-text description for the icon.
+    pub title: Option<String>,
+    /// The style of the `<svg>` element.
+    pub style: Option<String>,
+}
+
+/// Icon component which generates SVG elements
+#[allow(non_snake_case)]
+pub fn Icon<T: IconShape + Clone + PartialEq + 'static>(props: IconProps<T>) -> Element {
+    let (fill, stroke, stroke_width) = props.icon.fill_and_stroke(&props.fill);
+    rsx!(
+        svg {
+            class: "{props.class}",
+            style: props.style,
+            height: props.height.map(|height| height.to_string()),
+            width: props.width.map(|width| width.to_string()),
+            view_box: "{props.icon.view_box()}",
+            xmlns: "{props.icon.xmlns()}",
+            fill,
+            stroke,
+            stroke_width,
+            stroke_linecap: "{props.icon.stroke_linecap()}",
+            stroke_linejoin: "{props.icon.stroke_linejoin()}",
+            if let Some(title_text) = props.title {
+                title { "{title_text}" }
+            }
+            {props.icon.child_elements()}
+        }
+    )
+}
--- a/dioxus-free-icons/packages/lib/src/icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons.rs
@@ -0,0 +1,56 @@
+#[cfg(feature = "bootstrap")]
+pub mod bs_icons;
+#[cfg(feature = "font-awesome-brands")]
+pub mod fa_brands_icons;
+#[cfg(feature = "font-awesome-regular")]
+pub mod fa_regular_icons;
+#[cfg(feature = "font-awesome-solid")]
+pub mod fa_solid_icons;
+#[cfg(feature = "feather")]
+pub mod fi_icons;
+#[cfg(feature = "octicons")]
+pub mod go_icons;
+#[cfg(feature = "hero-icons-outline")]
+pub mod hi_outline_icons;
+#[cfg(feature = "hero-icons-solid")]
+pub mod hi_solid_icons;
+#[cfg(feature = "ionicons")]
+pub mod io_icons;
+#[cfg(feature = "lucide")]
+pub mod ld_icons;
+#[cfg(feature = "material-design-icons-action")]
+pub mod md_action_icons;
+#[cfg(feature = "material-design-icons-alert")]
+pub mod md_alert_icons;
+#[cfg(feature = "material-design-icons-av")]
+pub mod md_av_icons;
+#[cfg(feature = "material-design-icons-communication")]
+pub mod md_communication_icons;
+#[cfg(feature = "material-design-icons-content")]
+pub mod md_content_icons;
+#[cfg(feature = "material-design-icons-device")]
+pub mod md_device_icons;
+#[cfg(feature = "material-design-icons-editor")]
+pub mod md_editor_icons;
+#[cfg(feature = "material-design-icons-file")]
+pub mod md_file_icons;
+#[cfg(feature = "material-design-icons-hardware")]
+pub mod md_hardware_icons;
+#[cfg(feature = "material-design-icons-home")]
+pub mod md_home_icons;
+#[cfg(feature = "material-design-icons-image")]
+pub mod md_image_icons;
+#[cfg(feature = "material-design-icons-maps")]
+pub mod md_maps_icons;
+#[cfg(feature = "material-design-icons-navigation")]
+pub mod md_navigation_icons;
+#[cfg(feature = "material-design-icons-notification")]
+pub mod md_notification_icons;
+#[cfg(feature = "material-design-icons-places")]
+pub mod md_places_icons;
+#[cfg(feature = "material-design-icons-social")]
+pub mod md_social_icons;
+#[cfg(feature = "material-design-icons-toggle")]
+pub mod md_toggle_icons;
+#[cfg(feature = "codicons")]
+pub mod vsc_icons;
--- a/dioxus-free-icons/packages/lib/src/icons/bs_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/bs_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/fa_brands_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/fa_brands_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/fa_regular_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/fa_regular_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/fa_solid_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/fa_solid_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/fi_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/fi_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/go_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/go_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/hi_outline_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/hi_outline_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/hi_solid_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/hi_solid_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/io_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/io_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/ld_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/ld_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_action_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_action_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_alert_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_alert_icons.rs
@@ -0,0 +1,170 @@
+use super::super::IconShape;
+use dioxus::prelude::*;
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdAddAlert;
+impl IconShape for MdAddAlert {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdAutoDelete;
+impl IconShape for MdAutoDelete {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            polygon {
+                points: "15,2 11.5,2 10.5,1 5.5,1 4.5,2 1,2 1,4 15,4",
+            }
+            path {
+                d: "M16,9c-0.7,0-1.37,0.1-2,0.29V5H2v12c0,1.1,0.9,2,2,2h5.68c1.12,2.36,3.53,4,6.32,4c3.87,0,7-3.13,7-7 C23,12.13,19.87,9,16,9z M16,21c-2.76,0-5-2.24-5-5s2.24-5,5-5s5,2.24,5,5S18.76,21,16,21z",
+            }
+            polygon {
+                points: "16.5,12 15,12 15,17 18.6,19.1 19.4,17.9 16.5,16.2",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdError;
+impl IconShape for MdError {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdErrorOutline;
+impl IconShape for MdErrorOutline {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdNotificationImportant;
+impl IconShape for MdNotificationImportant {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M18 16v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-5 0h-2v-2h2v2zm0-4h-2V8h2v4zm-1 10c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdWarning;
+impl IconShape for MdWarning {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+            }
+        }
+    }
+}
--- a/dioxus-free-icons/packages/lib/src/icons/md_av_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_av_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_communication_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_communication_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_content_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_content_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_device_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_device_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_editor_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_editor_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_file_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_file_icons.rs
@@ -0,0 +1,818 @@
+use super::super::IconShape;
+use dioxus::prelude::*;
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdApproval;
+impl IconShape for MdApproval {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M4 16v6h16v-6c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2zm14 2H6v-2h12v2zM12 2C9.24 2 7 4.24 7 7l5 7 5-7c0-2.76-2.24-5-5-5zm0 9L9 7c0-1.66 1.34-3 3-3s3 1.34 3 3l-3 4z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdAttachEmail;
+impl IconShape for MdAttachEmail {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M21,10V4c0-1.1-0.9-2-2-2H3C1.9,2,1.01,2.9,1.01,4L1,16c0,1.1,0.9,2,2,2h11v-5c0-1.66,1.34-3,3-3H21z M11,11L3,6V4l8,5 l8-5v2L11,11z",
+            }
+            path {
+                d: "M21,14v4c0,1.1-0.9,2-2,2s-2-0.9-2-2v-4.5c0-0.28,0.22-0.5,0.5-0.5s0.5,0.22,0.5,0.5V18h2v-4.5c0-1.38-1.12-2.5-2.5-2.5 S15,12.12,15,13.5V18c0,2.21,1.79,4,4,4s4-1.79,4-4v-4H21z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdAttachment;
+impl IconShape for MdAttachment {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloud;
+impl IconShape for MdCloud {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudCircle;
+impl IconShape for MdCloudCircle {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 14H8c-1.66 0-3-1.34-3-3s1.34-3 3-3l.14.01C8.58 8.28 10.13 7 12 7c2.21 0 4 1.79 4 4h.5c1.38 0 2.5 1.12 2.5 2.5S17.88 16 16.5 16z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudDone;
+impl IconShape for MdCloudDone {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudDownload;
+impl IconShape for MdCloudDownload {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudOff;
+impl IconShape for MdCloudOff {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudQueue;
+impl IconShape for MdCloudQueue {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCloudUpload;
+impl IconShape for MdCloudUpload {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCreateNewFolder;
+impl IconShape for MdCreateNewFolder {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdDriveFileMove;
+impl IconShape for MdDriveFileMove {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 12v-3h-4v-4h4V8l5 5-5 5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdDriveFileMoveOutline;
+impl IconShape for MdDriveFileMoveOutline {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10zm-8.01-9l-1.41 1.41L12.16 12H8v2h4.16l-1.59 1.59L11.99 17 16 13.01 11.99 9z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdDriveFileRenameOutline;
+impl IconShape for MdDriveFileRenameOutline {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M18.41 5.8L17.2 4.59c-.78-.78-2.05-.78-2.83 0l-2.68 2.68L3 15.96V20h4.04l8.74-8.74 2.63-2.63c.79-.78.79-2.05 0-2.83zM6.21 18H5v-1.21l8.66-8.66 1.21 1.21L6.21 18zM11 20l4-4h6v4H11z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdDriveFolderUpload;
+impl IconShape for MdDriveFolderUpload {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10zM8 13.01l1.41 1.41L11 12.84V17h2v-4.16l1.59 1.59L16 13.01 12.01 9 8 13.01z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFileDownload;
+impl IconShape for MdFileDownload {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFileDownloadDone;
+impl IconShape for MdFileDownloadDone {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFileUpload;
+impl IconShape for MdFileUpload {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFolder;
+impl IconShape for MdFolder {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFolderOpen;
+impl IconShape for MdFolderOpen {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdFolderShared;
+impl IconShape for MdFolderShared {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 3c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8h-8v-1c0-1.33 2.67-2 4-2s4 .67 4 2v1z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdGridView;
+impl IconShape for MdGridView {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M0 0h24v24H0z",
+            }
+            path {
+                d: "M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdRequestQuote;
+impl IconShape for MdRequestQuote {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M15,12h-4v1h3c0.55,0,1,0.45,1,1v3 c0,0.55-0.45,1-1,1h-1v1h-2v-1H9v-2h4v-1h-3c-0.55,0-1-0.45-1-1v-3c0-0.55,0.45-1,1-1h1V9h2v1h2V12z M13,8V3.5L17.5,8H13z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdRuleFolder;
+impl IconShape for MdRuleFolder {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M7.83,16L5,13.17 l1.41-1.41l1.41,1.41l3.54-3.54l1.41,1.41L7.83,16z M17.41,13L19,14.59L17.59,16L16,14.41L14.41,16L13,14.59L14.59,13L13,11.41 L14.41,10L16,11.59L17.59,10L19,11.41L17.41,13z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdSnippetFolder;
+impl IconShape for MdSnippetFolder {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M15.88,10.5l1.62,1.62v3.38l-3,0v-5H15.88z M22,8v10c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2L2.01,6C2.01,4.9,2.9,4,4,4h6l2,2 h8C21.1,6,22,6.9,22,8z M19,11.5L16.5,9H13v8l6,0V11.5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdTextSnippet;
+impl IconShape for MdTextSnippet {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20.41,8.41l-4.83-4.83C15.21,3.21,14.7,3,14.17,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V9.83 C21,9.3,20.79,8.79,20.41,8.41z M7,7h7v2H7V7z M17,17H7v-2h10V17z M17,13H7v-2h10V13z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdTopic;
+impl IconShape for MdTopic {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M14,16H6v-2h8V16z M18,12H6v-2h12V12z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdUploadFile;
+impl IconShape for MdUploadFile {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdWorkspacesFilled;
+impl IconShape for MdWorkspacesFilled {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M6 13c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6-10C9.8 3 8 4.8 8 7s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6 10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdWorkspacesOutline;
+impl IconShape for MdWorkspacesOutline {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M6 15c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6-8c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2C9.8 3 8 4.8 8 7s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z",
+            }
+        }
+    }
+}
--- a/dioxus-free-icons/packages/lib/src/icons/md_hardware_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_hardware_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_home_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_home_icons.rs
@@ -0,0 +1,56 @@
+use super::super::IconShape;
+use dioxus::prelude::*;
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdSensorDoor;
+impl IconShape for MdSensorDoor {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M18,2H6C4.9,2,4,2.9,4,4v18h16V4C20,2.9,19.1,2,18,2z M15.5,13.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5 S17,11.17,17,12S16.33,13.5,15.5,13.5z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdSensorWindow;
+impl IconShape for MdSensorWindow {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M18,4v16H6V4H18 M18,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2L18,2z M7,19h10v-6H7 V19z M10,10h4v1h3V5H7v6h3V10z",
+            }
+        }
+    }
+}
--- a/dioxus-free-icons/packages/lib/src/icons/md_image_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_image_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_maps_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_maps_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_navigation_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_navigation_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_notification_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_notification_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_places_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_places_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_social_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_social_icons.rs
--- a/dioxus-free-icons/packages/lib/src/icons/md_toggle_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/md_toggle_icons.rs
@@ -0,0 +1,298 @@
+use super::super::IconShape;
+use dioxus::prelude::*;
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCheckBox;
+impl IconShape for MdCheckBox {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdCheckBoxOutlineBlank;
+impl IconShape for MdCheckBoxOutlineBlank {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdIndeterminateCheckBox;
+impl IconShape for MdIndeterminateCheckBox {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdRadioButtonChecked;
+impl IconShape for MdRadioButtonChecked {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdRadioButtonUnchecked;
+impl IconShape for MdRadioButtonUnchecked {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdStar;
+impl IconShape for MdStar {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M0 0h24v24H0z",
+            }
+            path {
+                d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdStarBorder;
+impl IconShape for MdStarBorder {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdStarHalf;
+impl IconShape for MdStarHalf {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M22,9.24l-7.19-0.62L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27L18.18,21l-1.63-7.03L22,9.24z M12,15.4V6.1 l1.71,4.04l4.38,0.38l-3.32,2.88l1,4.28L12,15.4z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdStarOutline;
+impl IconShape for MdStarOutline {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {}
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdToggleOff;
+impl IconShape for MdToggleOff {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z",
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct MdToggleOn;
+impl IconShape for MdToggleOn {
+    fn view_box(&self) -> &str {
+        "0 0 24 24"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn fill_and_stroke<'a>(&self, user_color: &'a str) -> (&'a str, &'a str, &'a str) {
+        (user_color, "none", "0")
+    }
+    fn stroke_linecap(&self) -> &str {
+        "butt"
+    }
+    fn stroke_linejoin(&self) -> &str {
+        "miter"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                d: "M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z",
+            }
+        }
+    }
+}
--- a/dioxus-free-icons/packages/lib/src/icons/vsc_icons.rs
+++ b/dioxus-free-icons/packages/lib/src/icons/vsc_icons.rs
--- a/dioxus-free-icons/packages/lib/src/lib.rs
+++ b/dioxus-free-icons/packages/lib/src/lib.rs
@@ -0,0 +1,27 @@
+//! # dioxus-free-icons
+//!
+//! Use free svg icons in your Dioxus projects easily with dioxus-free-icons.
+//! This library provides Icon component, which will generate SVG for a Font Awesome icon.
+//!
+//! Basic usage:
+//! ```ignore
+//! use dioxus::prelude::*;
+//! use dioxus_free_icons::icons::fa_brands_icons::FaRust;
+//! use dioxus_free_icons::Icon;
+//!
+//! fn RustIcon() -> Element {
+//!     rsx!(
+//!         Icon {
+//!             width: 30,
+//!             height: 30,
+//!             fill: "black",
+//!             icon: Icon::FaRust,
+//!         }
+//!     )
+//! }
+//! ```
+mod icon_component;
+
+/// a collections of free icons
+pub mod icons;
+pub use crate::icon_component::{Icon, IconProps, IconShape};
--- a/dioxus-i18n/.github/release-drafter.yml
+++ b/dioxus-i18n/.github/release-drafter.yml
@@ -0,0 +1,48 @@
+name-template: "Release v$RESOLVED_VERSION 🦀"
+tag-template: "v$RESOLVED_VERSION"
+categories:
+  - title: "🚀 Features"
+    label: "feature"
+  - title: "🐛 Bug Fixes"
+    label: "bug"
+  - title: "♻️ Refactor"
+    label: "refactor"
+  - title: "📝 Documentation"
+    label: "documentation"
+  - title: "🧰 Maintenance"
+    labels:
+      - "chore"
+      - "dependencies"
+change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
+change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
+version-resolver:
+  major:
+    labels:
+      - "major"
+  minor:
+    labels:
+      - "minor"
+  patch:
+    labels:
+      - "patch"
+  default: patch
+template: |
+  ## Changes
+
+  $CHANGES
+autolabeler:
+  - label: feature
+    branch:
+      - "/^feat(ure)?[/-].+/"
+  - label: bug
+    branch:
+      - "/^fix[/-].+/"
+  - label: refactor
+    branch:
+      - "/(refactor|refactoring)[/-].+/"
+  - label: documentation
+    branch:
+      - "/doc(s|umentation)[/-].+/"
+  - label: chore
+    branch:
+      - "/^chore[/-].+/"
--- a/dioxus-i18n/.github/workflows/publish.yml
+++ b/dioxus-i18n/.github/workflows/publish.yml
@@ -0,0 +1,19 @@
+name: Cargo Publish
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  publish:
+    name: Publish to crate.io
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: cargo publish
+        env:
+          CARGO_REGISTRY_TOKEN: ${{ secrets.CARGO_REGISTRY_TOKEN }}
--- a/dioxus-i18n/.github/workflows/release-drafter.yml
+++ b/dioxus-i18n/.github/workflows/release-drafter.yml
@@ -0,0 +1,19 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  update_release_draft:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/dioxus-i18n/.github/workflows/test_runs.yml
+++ b/dioxus-i18n/.github/workflows/test_runs.yml
@@ -0,0 +1,40 @@
+name: Test Runs
+
+on:
+    push:
+        branches:
+            - main
+
+    pull_request:
+        types: [opened, reopened, synchronize]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Updates
+              run: |
+                  sudo apt update
+                  sudo apt install libwebkit2gtk-4.1-dev \
+                    build-essential \
+                    libxdo-dev \
+                    libssl-dev \
+                    libayatana-appindicator3-dev \
+                    librsvg2-dev \
+                    libglib2.0-dev
+
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Lint
+              run: cargo clippy -- -D warnings
+
+            - name: Test
+              run: cargo test
+
+            - name: Compile
+              run: |
+                  rustup target add wasm32-unknown-unknown
+                  cargo build --target wasm32-unknown-unknown
+                  cargo build --release
--- a/dioxus-i18n/.gitignore
+++ b/dioxus-i18n/.gitignore
@@ -0,0 +1,2 @@
+Cargo.lock
+/target
--- a/dioxus-i18n/CHANGELOG.md
+++ b/dioxus-i18n/CHANGELOG.md
@@ -0,0 +1,117 @@
+# Changelog
+
+## [0.4.3]
+
+- [Issue #19](https://github.com/dioxus-community/dioxus-i18n/issues/19) Enable use of "message-id.attribute-id"
+  syntax in the `t!`, `te!`, `tid!` macros in order to extract attribute definition, e.g. `t!("mycomponent.placeholder")`
+  in:
+  ```
+  mycomponent = Component Name
+     .placeholder = Some placeholder
+     .aria-text = Some aria text
+  ```
+
+- Added examples for all fluent grammar constructs and configuration variants.
+
+## [0.4.2] 2025-02-08
+
+### Fixed
+
+- [Issue #15](https://github.com/dioxus-community/dioxus-i18n/issues/15) Recent change to t! macro unnecessarily breaks v0.3 code.
+
+### Amended
+
+- t! macro amended to use unwrap_or_else rather than panic!.
+
+- Error messages made consistant across all macros.
+
+## [0.4.1] 2025-02-02
+
+### Added
+
+- New methods (`I18nConfig::with_auto_locales`) to determine supported locales from deep search for translation files.
+
+- New methods returning `Result<_, Error>` rather than `panic!`, such that:
+  | __`panic!` version__                    | __`Result<_, Error>` vesion__            |
+  |-----------------------------------------|------------------------------------------|
+  | `LocaleResource::to_resource_string`    | `LocaleResource::try_to_resource_string` |
+  | `I18n::translate`                       | `I18n::try_translate`                    |
+  | `I18n::translate_with_args`             | `I18n::try_translate_with_args`          |
+  | `I18n::set_fallback_language`           | `I18n::try_set_fallback_language`        |
+  | `I18n::set_language`                    | `I18n::try_set_language`                 |
+  | `use_init_i18n`                         | `try_use_init_i18n`                      |
+  | `I18nConfig::with_auto_locales`         | `I18nConfig::try_with_auto_locales`      |
+
+- New `te!` macro which acts like `t!` but returns `Error`.
+
+- New `tid!` macro which acts like `t!` but returns the message-id.
+
+### Change
+
+- t! macro amended to use `try_translate` and `try_translate_with_args`, but will perform `.expect("..")`
+  and therefore panic! on error. This retains backwards compatibility for this macro.
+
+- Use of `set_fallback_language` / `try_set_fallback_language` without a corresponding locale
+  translation is treated as an error.
+
+## [0.4.0] 2025-01-25
+
+### Added
+
+- Code:
+  - Doc comments
+  - Module tests for `cargo test`
+
+- Amended `I18nConfig::with_locale` so that the `Locale` dynamic or static
+  constructors no longer have to be _explicitly_ given.
+  They can be determined implicitly from `(LanguageIdentifier, &str)`  or
+  `(LanguageIdentifer, PathBuf)`.
+
+- Enabled shared 'LocaleResource's, where two dialect can use the same translation file.
+  For example ["en", "en-GB"] share "en-GB.ftl".
+
+### Changed
+
+- The translations used are determined when `I18n::set_language` or
+  `I18n::set_fallback_language` is called, and not each time a message is translated.
+
+- __Fallback handling has changed__. It no longer just uses _fallback_language_ when the message
+  id is missing from the current _locale_. It performs a graceful fallback from
+  _<language>-<region>_ to _<language>_ before using the actual _fallback_ (in fact it
+  falls back along the _<language>-<optionalScript>-<optionalRegion>-<optionalVariants>_
+  hiearchy).
+
+  __Note:__ this is a breaking change which may impact the selected translation.
+
+- `LocaleResource::to_string` renamed to `LocaleResource::to_resource_string`
+
+## [0.3.0] 2024-12-10
+
+- [Dioxus 0.6](https://dioxuslabs.com/) support
+
+## [0.2.4] 2024-09-11
+
+- Hide new_dynamic in WASM
+- New t!() macro
+
+## [0.2.3] 2024-09-04
+
+- Support dynamic loading of locales
+
+## [0.2.2] 2024-09-02
+
+- Enable macros instead of serde in unic-langid
+
+## [0.2.1] 2024-09-02
+
+- Export unic_langid and fluent
+- Use absolute path to import fluent in the translate macro
+- Updated freya example
+
+## [0.2.0] 2024-09-01
+
+- Now based in the [Fluent Project](https://github.com/projectfluent/fluent-rs)
+
+## [0.1.0] 2024-08-31
+
+- Initial release
--- a/dioxus-i18n/Cargo.toml
+++ b/dioxus-i18n/Cargo.toml
@@ -0,0 +1,30 @@
+[package]
+name = "dioxus-i18n"
+version = "0.5.1"
+edition = "2021"
+authors = ["Marc Espín <mespinsanz@gmail.com>"]
+description = "i18n integration for Dioxus apps based on Fluent Project."
+license = "MIT"
+repository = "https://github.com/dioxus-community/dioxus-i18n"
+readme = "./README.md"
+categories = ["accessibility", "gui", "localization", "internationalization"]
+
+[dependencies]
+dioxus = { git = "https://github.com/matous-volf/dioxus", rev = "627d5ca5b80aeed57c23e253024665f103117f5e", default-features = false, features = [
+    "hooks",
+    "macro",
+    "signals",
+] }
+fluent = "0.17"
+thiserror = "2.0"
+unic-langid = { version = "0.9", features = ["macros"] }
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+walkdir = "2.5.0"
+
+[dev-dependencies]
+dioxus = { git = "https://github.com/matous-volf/dioxus", rev = "627d5ca5b80aeed57c23e253024665f103117f5e", features = ["desktop"] }
+freya = "0.3"
+futures = "0.3.31"
+pretty_assertions = "1.4.1"
+unic-langid = { version = "0.9.5", features = ["macros"] }
--- a/dioxus-i18n/LICENSE.md
+++ b/dioxus-i18n/LICENSE.md
@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) Marc Espín Sanz
+
+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.
--- a/dioxus-i18n/README.md
+++ b/dioxus-i18n/README.md
@@ -0,0 +1,85 @@
+# dioxus-i18n 🌍
+
+i18n integration for Dioxus apps based on the [Project Fluent](https://github.com/projectfluent/fluent-rs).
+
+> This crate used to be in the [Dioxus SDK](https://github.com/DioxusLabs/sdk).
+
+## Support
+
+- **Dioxus v0.6** 🧬
+- Renderers:
+  - [web](https://dioxuslabs.com/learn/0.6/guides/web/),
+  - [desktop](https://dioxuslabs.com/learn/0.6/guides/desktop/),
+  - [freya](https://github.com/marc2332/freya)
+- Both WASM and native targets
+
+## Example:
+
+```ftl
+# en-US.ftl
+
+hello = Hello, {$name}!
+```
+
+```rs
+// main.rs
+
+fn app() -> Element {
+    let i18 = use_init_i18n(|| {
+        I18nConfig::new(langid!("en-US"))
+            // implicit [`Locale`]
+            .with_locale(( // Embed
+                langid!("en-US"),
+                include_str!("./en-US.ftl")
+            ))
+            .with_locale(( // Load at launch
+                langid!("es-ES"),
+                PathBuf::from("./es-ES.ftl"),
+            ))
+            .with_locale((     // Locales will share duplicated locale_resources
+                langid!("en"), // which is useful to assign a specific region for
+                include_str!("./en-US.ftl") // the primary language
+            ))
+            // explicit [`Locale`]
+            .with_locale(Locale::new_static( // Embed
+                langid!("en-US"),
+                include_str!("./en-US.ftl"),
+            ))
+            .with_locale(Locale::new_dynamic( // Load at launch
+                langid!("es-ES"),
+                PathBuf::from("./es-ES.ftl"),
+            ))
+    });
+
+    rsx!(
+        label { { t!("hello", name: "World") } }
+    )
+}
+```
+
+## Further examples
+
+The examples folder contains a number of working examples:
+
+* Desktop examples:
+  * [Dioxus](./examples/dioxus-desktop.rs)
+  * [Freya](./examples/freya.rs)
+* Configuration variants:
+  * [Auto locales](./examples/config-auto-locales.rs)
+  * [Dynamic (PathBuf)](./examples/config-dynamic-pathbuf.rs)
+  * [Static (include_str!)](./examples/config-static-includestr.rs)
+* Fluent grammer:
+  * [Application](./examples/fluent-grammar.rs)
+  * [FTL file](./examples/data/fluent/en.ftl)
+
+## Development
+
+```bash
+# Checks clean compile against `#[cfg(not(target_arch = "wasm32"))]`
+cargo build --target wasm32-unknown-unknown
+
+# Runs all tests
+cargo test
+```
+
+[MIT License](./LICENSE.md)
--- a/dioxus-i18n/examples/config-auto-locales.rs
+++ b/dioxus-i18n/examples/config-auto-locales.rs
@@ -0,0 +1,47 @@
+//! This example demonstrates how to use an auto_locales derived I18nConfig.
+//! This is useful when you have a lot of locales and you don't want to manually add them.
+
+use dioxus::prelude::*;
+use dioxus_i18n::{prelude::*, t};
+use unic_langid::langid;
+
+use std::path::PathBuf;
+
+fn main() {
+    launch(app);
+}
+
+#[allow(non_snake_case)]
+fn Body() -> Element {
+    let mut i18n = i18n();
+
+    let change_to_english = move |_| i18n.set_language(langid!("en-US"));
+    let change_to_spanish = move |_| i18n.set_language(langid!("es-ES"));
+
+    rsx!(
+        button {
+            onclick: change_to_english,
+            label {
+                "English"
+            }
+        }
+        button {
+            onclick: change_to_spanish,
+            label {
+                "Spanish"
+            }
+        }
+        p { { t!("hello_world") } }
+        p { { t!("hello", name: "Dioxus") }  }
+    )
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        // This initialisation performs a deep search for all locales in the given path.
+        // It IS NOT supported in WASM targets.
+        I18nConfig::new(langid!("en-US")).with_auto_locales(PathBuf::from("./examples/data/i18n/"))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/examples/config-dynamic-pathbuf.rs
+++ b/dioxus-i18n/examples/config-dynamic-pathbuf.rs
@@ -0,0 +1,62 @@
+//! This example demonstrates how to use pathbuf derived I18nConfig.
+//! This is useful when the path to the translation files is not known at compile time.
+
+use dioxus::prelude::*;
+use dioxus_i18n::{prelude::*, t};
+use unic_langid::langid;
+
+use std::path::PathBuf;
+
+fn main() {
+    launch(app);
+}
+
+#[allow(non_snake_case)]
+fn Body() -> Element {
+    let mut i18n = i18n();
+
+    let change_to_english = move |_| i18n.set_language(langid!("en-US"));
+    let change_to_spanish = move |_| i18n.set_language(langid!("es-ES"));
+
+    rsx!(
+        button {
+            onclick: change_to_english,
+            label {
+                "English"
+            }
+        }
+        button {
+            onclick: change_to_spanish,
+            label {
+                "Spanish"
+            }
+        }
+        p { { t!("hello_world") } }
+        p { { t!("hello", name: "Dioxus") }  }
+    )
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        // This initialisation allows individual translation files to be selected.
+        // The locales can be added with an implicitly derived locale (see config-static-includestr.rs for a comparison)
+        // or using an explicit Locale::new_dynamic call.
+        //
+        // The two examples are functionally equivalent.
+        //
+        // It IS NOT supported in WASM targets.
+        I18nConfig::new(langid!("en-US"))
+            // Implicit...
+            .with_locale((
+                langid!("es-ES"),
+                PathBuf::from("./examples/data/i18n/es-ES.ftl"),
+            ))
+            // Explicit...
+            .with_locale(Locale::new_dynamic(
+                langid!("en-US"),
+                PathBuf::from("./examples/data/i18n/en-US.ftl"),
+            ))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/examples/config-static-includestr.rs
+++ b/dioxus-i18n/examples/config-static-includestr.rs
@@ -0,0 +1,57 @@
+//! This example demonstrates how to use pathbuf derived I18nConfig.
+//! This is useful for WASM targets; the paths to the translation files must be known at compile time.
+
+use dioxus::prelude::*;
+use dioxus_i18n::{prelude::*, t};
+use unic_langid::langid;
+
+fn main() {
+    launch(app);
+}
+
+#[allow(non_snake_case)]
+fn Body() -> Element {
+    let mut i18n = i18n();
+
+    let change_to_english = move |_| i18n.set_language(langid!("en-US"));
+    let change_to_spanish = move |_| i18n.set_language(langid!("es-ES"));
+
+    rsx!(
+        button {
+            onclick: change_to_english,
+            label {
+                "English"
+            }
+        }
+        button {
+            onclick: change_to_spanish,
+            label {
+                "Spanish"
+            }
+        }
+        p { { t!("hello_world") } }
+        p { { t!("hello", name: "Dioxus") }  }
+    )
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        // This initialisation allows individual translation files to be selected.
+        // The locales can be added with an implicitly derived locale (see config-dynamic-pathbuf.rs for a comparison)
+        // or using an explicit Locale::new_static call.
+        //
+        // The two examples are functionally equivalent.
+        //
+        // It IS supported in WASM targets.
+        I18nConfig::new(langid!("en-US"))
+            // Implicit...
+            .with_locale((langid!("es-ES"), include_str!("./data/i18n/es-ES.ftl")))
+            // Explicit...
+            .with_locale(Locale::new_static(
+                langid!("en-US"),
+                include_str!("./data/i18n/en-US.ftl"),
+            ))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/examples/data/fluent/en.ftl
+++ b/dioxus-i18n/examples/data/fluent/en.ftl
@@ -0,0 +1,124 @@
+### Fluent grammar examples for dioxus-i18n.
+
+## These examples demonstrate Fluent file grammar and how dioxus-i18n can be
+## used to access these translations.
+
+## Examples derived from: https://projectfluent.org/fluent/guide/index.html
+
+# Simple message
+simple-message = This is a simple message.
+
+# $name (String) - The name you want to display.
+message-with-variable = This is a message with a variable: { $name }.
+
+# Reference to a term.
+-a-term = This is a common term used by many messages.
+message-referencing-a-term = This is a message with a reference: { -a-term }.
+
+# Use of special characters.
+message-with-special-character = This message contain opening curly brace {"{"} and a closing curly brace {"}"}.
+
+# Message with blanks.
+blank-is-removed =     This message starts with no blanks.
+blank-is-preserved = {"    "}This message starts with 4 spaces (note HTML contracts them).
+
+# Message with attributes.
+message-with-attributes = Predefined value
+    .placeholder = email@example.com
+    .aria-label = Login input value
+    .title = Type your login email
+
+# Message with quotes.
+literal-quote-cryptic = Text in {"\""}double quotes{"\""}.
+literal-quote-preferred = Text in "double quotes".
+
+# Message with Unicode characters.
+unicode-cryptic = {"\u2605"} {"\u2606"} {"\u2728"} {"\u262F"} {"\u263A"}
+unicode-preferred = ★ ☆ ✨ ☯ ☺
+
+# Message with a placeable.
+single-line = Text can be written in a single line.
+
+multi-line = Text can also span multiple lines
+    as long as each new line is indented
+    by at least one space.
+
+block-line =
+    Sometimes it's more readable to format
+    multiline text as a "block", which means
+    starting it on a new line. All lines must
+    be indented by at least one space.
+
+# Message using functions.
+#
+# Note: Builtin functions are currently unsupported: See Fluent issue https://github.com/projectfluent/fluent-rs/issues/181
+# The Bundle::add_builtins() function is not published at the time of writing this example.
+#
+# Using a builtin currently results in an error.
+#
+# $duration (Number) - The duration in seconds.
+time-elapsed-no-function = Time elapsed: { $duration }s.
+time-elapsed-function = Currently unsupported: error raised: { NUMBER($duration) }.
+
+# Message reference.
+referenced-message = Referenced message
+message-referencing-another-message = Message referencing another message: { referenced-message }.
+
+# Message selection plurals.
+message-selection-plurals =
+    { $value ->
+       *[one] Value is one: { $value }.
+        [other] Value is more than one: { $value }.
+    }
+
+# Message selection numeric.
+# Argument must be numeric.
+message-selection-numeric =
+    { NUMERIC($value) ->
+        [0.0]   Zero: { $value }.
+       *[0.5]   A half: { $value }.
+        [other] Other ($value)
+    }
+
+# Message selection number.
+#
+# Note: Builtin functions are currently unsupported: See Fluent issue https://github.com/projectfluent/fluent-rs/issues/181
+# The Bundle::add_builtins() function is not published at the time of writing this example.
+#
+# Using the NUMBER builtin always results in a default behaviour.
+#
+message-selection-number = { NUMBER($pos, type: "ordinal") ->
+   [1] First!
+   [one] {$pos}st
+   [two] {$pos}nd
+   [few] {$pos}rd
+  *[other] {$pos}th
+}
+
+
+# Variables in references.
+-term-using-variable = https://{ $host }
+message-using-term-with-variable = For example: { -term-using-variable(host: "example.com") }.
+
+-term-using-variable-2 =
+    { $case ->
+       *[nominative] Firefox
+        [locative] Firefoksie
+    }
+message-using-term-with-variable-2-1 = Informacje o { -term-using-variable-2(case: "locative") }.
+message-using-term-with-variable-2-2 = About { -term-using-variable-2(case: "nominative") }.
+message-using-term-with-variable-2-default = About { -term-using-variable-2(case: "") }.
+message-using-term-with-variable-2-not-provided = About { -term-using-variable-2 }.
+
+-brand-name =
+    { $case ->
+       *[nominative] Firefox
+        [locative] Firefoksie
+    }
+
+string-literal = { "string literal" }
+number-literal-1 = { 1 }
+number-literal-2 = { -123 }
+number-literal-3 = { 3.14 }
+inline-expression-placeable-1 = { { "string literal" } }
+inline-expression-placeable-2 = { { 123 } }
--- a/dioxus-i18n/examples/data/i18n/en-US.ftl
+++ b/dioxus-i18n/examples/data/i18n/en-US.ftl
@@ -0,0 +1,3 @@
+hello_world = Hello, World!
+
+hello = Hello, {$name}!
--- a/dioxus-i18n/examples/data/i18n/es-ES.ftl
+++ b/dioxus-i18n/examples/data/i18n/es-ES.ftl
@@ -0,0 +1,3 @@
+hello_world = Hola, Mundo!
+
+hello = Hola, {$name}!
--- a/dioxus-i18n/examples/dioxus-desktop.rs
+++ b/dioxus-i18n/examples/dioxus-desktop.rs
@@ -0,0 +1,47 @@
+use dioxus::prelude::*;
+use dioxus_i18n::{prelude::*, t};
+use unic_langid::langid;
+
+use std::path::PathBuf;
+
+fn main() {
+    launch(app);
+}
+
+#[allow(non_snake_case)]
+fn Body() -> Element {
+    let mut i18n = i18n();
+
+    let change_to_english = move |_| i18n.set_language(langid!("en-US"));
+    let change_to_spanish = move |_| i18n.set_language(langid!("es-ES"));
+
+    rsx!(
+        button {
+            onclick: change_to_english,
+            label {
+                "English"
+            }
+        }
+        button {
+            onclick: change_to_spanish,
+            label {
+                "Spanish"
+            }
+        }
+        p { { t!("hello_world") } }
+        p { { t!("hello", name: "Dioxus") }  }
+    )
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        I18nConfig::new(langid!("en-US"))
+            .with_locale((langid!("en-US"), include_str!("./data/i18n/en-US.ftl")))
+            .with_locale((
+                langid!("es-ES"),
+                PathBuf::from("./examples/data/i18n/es-ES.ftl"),
+            ))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/examples/fluent-grammar.rs
+++ b/dioxus-i18n/examples/fluent-grammar.rs
@@ -0,0 +1,233 @@
+//! This example demonstrates many of the Fluent grammar constructs, and how they are
+//! used in dioxus-i18n.
+//! This performs a lookup only, no additional translation files are provided
+
+use dioxus::prelude::*;
+use dioxus_i18n::{prelude::*, tid};
+use unic_langid::langid;
+
+use std::path::PathBuf;
+
+fn main() {
+    launch(app);
+}
+
+#[allow(non_snake_case)]
+#[component]
+fn Body() -> Element {
+    rsx! {
+        table {
+            tbody {
+                tr {
+                    td { "Simple message" }
+                    td { {tid!("simple-message")} }
+                }
+                tr {
+                    td { "Non-existing message: id provided by default when using tid! macro" }
+                    td { {tid!("non-existing-message")} }
+                }
+                tr {
+                    td { "Message with a variable" }
+                    td { {tid!("message-with-variable", name: "Value 1")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-with-variable", name: "Value 2")} }
+                }
+                tr {
+                    td { "Reference to a term" }
+                    td { {tid!("message-referencing-a-term")} }
+                }
+                tr {
+                    td { "Use of special characters." }
+                    td { {tid!("message-with-special-character")} }
+                }
+                tr {
+                    td { "Message with blanks." }
+                    td { "'" {tid!("blank-is-removed")} "'" }
+                }
+                tr {
+                    td { }
+                    td { "'" {tid!("blank-is-preserved")} "'" }
+                }
+                tr {
+                    td { "Message with attributes: root" }
+                    td { {tid!("message-with-attributes")} }
+                }
+                tr {
+                    td { "Message with attributes: attribute" }
+                    td { {tid!("message-with-attributes.placeholder")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-with-attributes.aria-label")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-with-attributes.title")} }
+                }
+                tr {
+                    td { "Message with attributes: not existing" }
+                    td { {tid!("message-with-attributes.not-existing")} }
+                }
+                tr {
+                    td { "Message with attributes: invalid" }
+                    td { {tid!("message-with-attributes.placeholder.invalid")} }
+                }
+                tr {
+                    td { "Message with quotes: cryptic" }
+                    td { {tid!("literal-quote-cryptic")} }
+                }
+                tr {
+                    td { "Message with quotes: preferred" }
+                    td { {tid!("literal-quote-preferred")} }
+                }
+                tr {
+                    td { "Message with Unicode characters: cryptic" }
+                    td { {tid!("unicode-cryptic")} }
+                }
+                tr {
+                    td { "Message with Unicode characters: preferred" }
+                    td { {tid!("unicode-preferred")} }
+                }
+                tr {
+                    td { "Message with a placeable: single-line" }
+                    td { {tid!("line-single")} }
+                }
+                tr {
+                    td { "Message with a placeable: single-line" }
+                    td { {tid!("single-line")} }
+                }
+                tr {
+                    td { "Message with a placeable: multi-line (1)" }
+                    td { {tid!("multi-line")} }
+                }
+                tr {
+                    td { "Message with a placeable: multi-line (2)" }
+                    td { pre { {tid!("multi-line")} } }
+                }
+                tr {
+                    td { "Message with a placeable: block-line (1)" }
+                    td { {tid!("block-line")} }
+                }
+                tr {
+                    td { "Message with a placeable: block-line (2)" }
+                    td { pre { {tid!("block-line")} } }
+                }
+                tr {
+                    td { "Message using functions: no function" }
+                    td { pre { {tid!("time-elapsed-no-function", duration: 23.7114812589)} } }
+                }
+                tr {
+                    td { "Message using functions: function" }
+                    td { pre { {tid!("time-elapsed-function", duration: 23.7114812589)} } }
+                }
+                tr {
+                    td { "Reference to a message" }
+                    td { {tid!("message-referencing-another-message")} }
+                }
+                tr {
+                    td { "Message selection: plurals" }
+                    td { {tid!("message-selection-plurals", value: 1)} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-selection-plurals", value: 2)} }
+                }
+                tr {
+                    td { "Message selection: plurals (default: an 'empty' value must be provided...)" }
+                    td { {tid!("message-selection-plurals", value: "")} }
+                }
+                tr {
+                    td { "Message selection: plurals (default: ... otherwise an error is raised)" }
+                    td { {tid!("message-selection-plurals")} }
+                }
+                tr {
+                    td { "Message selection: numeric" }
+                    td { {tid!("message-selection-numeric", value: 0.0)} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-selection-numeric", value: 0.5)} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-selection-numeric", value: 42.0)} }
+                }
+                tr {
+                    td { "Message selection: numeric (default)" }
+                    td { {tid!("message-selection-numeric", value: "")} }
+                }
+                tr {
+                    td { "Message selection: number" }
+                    td { {tid!("message-selection-number", pos: 1)} }
+                }
+                tr {
+                    td { "" }
+                    td { {tid!("message-selection-number", pos: 2)} }
+                }
+                tr {
+                    td { "" }
+                    td { {tid!("message-selection-number", pos: 3)} }
+                }
+                tr {
+                    td { "" }
+                    td { {tid!("message-selection-number", pos: 4)} }
+                }
+                tr {
+                    td { "Variables in references (1)" }
+                    td { {tid!("message-using-term-with-variable")} }
+                }
+                tr {
+                    td { "Variables in references (2)" }
+                    td { {tid!("message-using-term-with-variable-2-1")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-using-term-with-variable-2-2")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-using-term-with-variable-2-default")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("message-using-term-with-variable-2-not-provided")} }
+                }
+                tr {
+                    td { "Literals: string" }
+                    td { {tid!("string-literal")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("number-literal-1")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("number-literal-2")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("number-literal-3")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("inline-expression-placeable-1")} }
+                }
+                tr {
+                    td { }
+                    td { {tid!("inline-expression-placeable-2")} }
+                }
+            }
+        }
+    }
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        // Only one example in this path, which contains the complete Fluent grammar.
+        I18nConfig::new(langid!("en")).with_auto_locales(PathBuf::from("./examples/data/fluent/"))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/examples/freya.rs
+++ b/dioxus-i18n/examples/freya.rs
@@ -0,0 +1,57 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use dioxus_i18n::{prelude::*, t};
+use freya::prelude::*;
+use unic_langid::langid;
+
+use std::path::PathBuf;
+
+fn main() {
+    launch_with_props(app, "freya + i18n", (300.0, 200.0));
+}
+
+#[allow(non_snake_case)]
+fn Body() -> Element {
+    let mut i18n = i18n();
+
+    let change_to_english = move |_| i18n.set_language(langid!("en-US"));
+    let change_to_spanish = move |_| i18n.set_language(langid!("es-ES"));
+
+    rsx!(
+        rect {
+            rect {
+                direction: "horizontal",
+                Button {
+                    onclick: change_to_english,
+                    label {
+                        "English"
+                    }
+                }
+                Button {
+                    onclick: change_to_spanish,
+                    label {
+                        "Spanish"
+                    }
+                }
+            }
+            label { { t!("hello_world") } }
+            label { { t!("hello", name: "Dioxus") } }
+        }
+    )
+}
+
+fn app() -> Element {
+    use_init_i18n(|| {
+        I18nConfig::new(langid!("en-US"))
+            .with_locale((langid!("en-US"), include_str!("./data/i18n/en-US.ftl")))
+            .with_locale((
+                langid!("es-ES"),
+                PathBuf::from("./examples/data/i18n/es-ES.ftl"),
+            ))
+    });
+
+    rsx!(Body {})
+}
--- a/dioxus-i18n/src/error.rs
+++ b/dioxus-i18n/src/error.rs
@@ -0,0 +1,31 @@
+use thiserror::Error;
+
+#[derive(Clone, Debug, Error)]
+pub enum Error {
+    #[error("invalid message id: '{0}'")]
+    InvalidMessageId(String),
+
+    #[error("message id not found for key: '{0}'")]
+    MessageIdNotFound(String),
+
+    #[error("attribute id not found for key: '{0}'")]
+    AttributeIdNotFound(String),
+
+    #[error("message pattern not found for key: '{0}'")]
+    MessagePatternNotFound(String),
+
+    #[error("fluent errors during lookup:\n{0}")]
+    FluentErrorsDetected(String),
+
+    #[error("failed to read locale resource from path: {0}")]
+    LocaleResourcePathReadFailed(String),
+
+    #[error("fallback for \"{0}\" must have locale")]
+    FallbackMustHaveLocale(String),
+
+    #[error("language id cannot be determined - reason: {0}")]
+    InvalidLanguageId(String),
+
+    #[error("invalid path: {0}")]
+    InvalidPath(String),
+}
--- a/dioxus-i18n/src/i18n_macro.rs
+++ b/dioxus-i18n/src/i18n_macro.rs
@@ -0,0 +1,101 @@
+//! Key translation macros.
+//!
+//! Using file:
+//!
+//! ```ftl
+//! # en-US.ftl
+//! #
+//! hello = Hello, {$name}!
+//! ```
+
+/// Translate message from key, returning [`crate::prelude::DioxusI18nError`] if id not found...
+///
+/// ```rust
+/// # use dioxus::prelude::*;
+/// # use dioxus_i18n::{te, prelude::*};
+/// # use unic_langid::langid;
+/// # #[component]
+/// # fn Example() -> Element {
+/// #   let lang = langid!("en-US");
+/// #   let config = I18nConfig::new(lang.clone()).with_locale((lang.clone(), "hello = Hello, {$name}")).with_fallback(lang.clone());
+/// #   let mut i18n = use_init_i18n(|| config);
+/// let name = "Avery Gigglesworth";
+/// let hi = te!("hello", name: {name}).expect("message id 'name' should be present");
+/// assert_eq!(hi, "Hello, Avery Gigglesworth");
+/// #   rsx! { "" }
+/// # }
+/// ```
+///
+#[macro_export]
+macro_rules! te {
+    ($id:expr, $( $name:ident : $value:expr ),* ) => {
+        {
+            let mut params_map = $crate::fluent::FluentArgs::new();
+            $(
+                params_map.set(stringify!($name), $value);
+            )*
+            $crate::prelude::i18n().try_translate_with_args($id, Some(&params_map))
+        }
+    };
+
+    ($id:expr ) => {{
+            $crate::prelude::i18n().try_translate($id)
+    }};
+}
+
+/// Translate message from key, panic! if id not found...
+///
+/// ```rust
+/// # use dioxus::prelude::*;
+/// # use dioxus_i18n::{t, prelude::*};
+/// # use unic_langid::langid;
+/// # #[component]
+/// # fn Example() -> Element {
+/// #   let lang = langid!("en-US");
+/// #   let config = I18nConfig::new(lang.clone()).with_locale((lang.clone(), "hello = Hello, {$name}")).with_fallback(lang.clone());
+/// #   let mut i18n = use_init_i18n(|| config);
+/// let name = "Avery Gigglesworth";
+/// let hi = t!("hello", name: {name});
+/// assert_eq!(hi, "Hello, Avery Gigglesworth");
+/// #   rsx! { "" }
+/// # }
+/// ```
+///
+#[macro_export]
+macro_rules! t {
+    ($id:expr, $( $name:ident : $value:expr ),* ) => {
+        $crate::te!($id, $( $name : $value ),*).unwrap_or_else(|e| panic!("{}", e.to_string()))
+    };
+
+    ($id:expr ) => {{
+        $crate::te!($id).unwrap_or_else(|e| panic!("{}", e.to_string()))
+    }};
+}
+
+/// Translate message from key, return id if no translation found...
+///
+/// ```rust
+/// # use dioxus::prelude::*;
+/// # use dioxus_i18n::{tid, prelude::*};
+/// # use unic_langid::langid;
+/// # #[component]
+/// # fn Example() -> Element {
+/// #   let lang = langid!("en-US");
+/// #   let config = I18nConfig::new(lang.clone()).with_locale((lang.clone(), "hello = Hello, {$name}")).with_fallback(lang.clone());
+/// #   let mut i18n = use_init_i18n(|| config);
+/// let message = tid!("no-key");
+/// assert_eq!(message, "message-id: no-key should be translated");
+/// #   rsx! { "" }
+/// # }
+/// ```
+///
+#[macro_export]
+macro_rules! tid {
+    ($id:expr, $( $name:ident : $value:expr ),* ) => {
+        $crate::te!($id, $( $name : $value ),*).unwrap_or_else(|e| e.to_string())
+    };
+
+    ($id:expr ) => {{
+        $crate::te!($id).unwrap_or_else(|e| e.to_string())
+    }};
+}
--- a/dioxus-i18n/src/lib.rs
+++ b/dioxus-i18n/src/lib.rs
@@ -0,0 +1,12 @@
+#![doc = include_str!("../README.md")]
+mod error;
+pub mod i18n_macro;
+pub mod use_i18n;
+
+pub use fluent;
+pub use unic_langid;
+
+pub mod prelude {
+    pub use crate::error::Error as DioxusI18nError;
+    pub use crate::use_i18n::*;
+}
--- a/dioxus-i18n/src/use_i18n.rs
+++ b/dioxus-i18n/src/use_i18n.rs
@@ -0,0 +1,703 @@
+use super::error::Error;
+
+use dioxus::prelude::*;
+use fluent::{FluentArgs, FluentBundle, FluentResource};
+use unic_langid::LanguageIdentifier;
+
+#[cfg(not(target_arch = "wasm32"))]
+use walkdir::WalkDir;
+
+use std::collections::HashMap;
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::path::{Path, PathBuf};
+
+/// `Locale` is a "place-holder" around what will eventually be a `fluent::FluentBundle`
+#[cfg_attr(test, derive(Debug, PartialEq))]
+pub struct Locale {
+    id: LanguageIdentifier,
+    resource: LocaleResource,
+}
+
+impl Locale {
+    pub fn new_static(id: LanguageIdentifier, str: &'static str) -> Self {
+        Self {
+            id,
+            resource: LocaleResource::Static(str),
+        }
+    }
+
+    #[cfg(not(target_arch = "wasm32"))]
+    pub fn new_dynamic(id: LanguageIdentifier, path: impl Into<PathBuf>) -> Self {
+        Self {
+            id,
+            resource: LocaleResource::Path(path.into()),
+        }
+    }
+}
+
+impl<T> From<(LanguageIdentifier, T)> for Locale
+where
+    T: Into<LocaleResource>,
+{
+    fn from((id, resource): (LanguageIdentifier, T)) -> Self {
+        let resource = resource.into();
+        Self { id, resource }
+    }
+}
+
+/// A `LocaleResource` can be static text, or a filesystem file (not supported in WASM).
+#[derive(Debug, PartialEq)]
+pub enum LocaleResource {
+    Static(&'static str),
+    #[cfg(not(target_arch = "wasm32"))]
+    Path(PathBuf),
+}
+
+impl LocaleResource {
+    pub fn try_to_resource_string(&self) -> Result<String, Error> {
+        match self {
+            Self::Static(str) => Ok(str.to_string()),
+            #[cfg(not(target_arch = "wasm32"))]
+            Self::Path(path) => std::fs::read_to_string(path)
+                .map_err(|e| Error::LocaleResourcePathReadFailed(e.to_string())),
+        }
+    }
+
+    pub fn to_resource_string(&self) -> String {
+        let result = self.try_to_resource_string();
+        match result {
+            Ok(string) => string,
+            Err(err) => panic!("failed to create resource string {:?}: {}", self, err),
+        }
+    }
+}
+
+impl From<&'static str> for LocaleResource {
+    fn from(value: &'static str) -> Self {
+        Self::Static(value)
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+impl From<PathBuf> for LocaleResource {
+    fn from(value: PathBuf) -> Self {
+        Self::Path(value)
+    }
+}
+
+/// The configuration for `I18n`.
+#[cfg_attr(test, derive(Debug, PartialEq))]
+pub struct I18nConfig {
+    /// The initial language, can be later changed with [`I18n::set_language`]
+    id: LanguageIdentifier,
+
+    /// The final fallback language if no other locales are found for `id`.
+    /// A `Locale` must exist in `locales' if `fallback` is defined.
+    fallback: Option<LanguageIdentifier>,
+
+    /// The locale_resources added to the configuration.
+    locale_resources: Vec<LocaleResource>,
+
+    /// The locales added to the configuration.
+    locales: HashMap<LanguageIdentifier, usize>,
+}
+
+impl I18nConfig {
+    /// Create an i18n config with the selected [LanguageIdentifier].
+    pub fn new(id: LanguageIdentifier) -> Self {
+        Self {
+            id,
+            fallback: None,
+            locale_resources: Vec::new(),
+            locales: HashMap::new(),
+        }
+    }
+
+    /// Set a fallback [LanguageIdentifier].
+    pub fn with_fallback(mut self, fallback: LanguageIdentifier) -> Self {
+        self.fallback = Some(fallback);
+        self
+    }
+
+    /// Add [Locale].
+    /// It is possible to share locales resources. If this locale's resource
+    /// matches a previously added one, then this locale will use the existing one.
+    /// This is primarily for the static locale_resources to avoid string duplication.
+    pub fn with_locale<T>(mut self, locale: T) -> Self
+    where
+        T: Into<Locale>,
+    {
+        let locale = locale.into();
+        let locale_resources_len = self.locale_resources.len();
+
+        let index = self
+            .locale_resources
+            .iter()
+            .position(|r| *r == locale.resource)
+            .unwrap_or(locale_resources_len);
+
+        if index == locale_resources_len {
+            self.locale_resources.push(locale.resource)
+        };
+
+        self.locales.insert(locale.id, index);
+        self
+    }
+
+    /// Add multiple locales from given folder, based on their filename.
+    ///
+    /// If the path represents a folder, then the folder will be deep traversed for
+    /// all '*.ftl' files. If the filename represents a [LanguageIdentifier] then it
+    ///  will be added to the config.
+    ///
+    /// If the path represents a file, then the filename must represent a
+    /// unic_langid::LanguageIdentifier for it to be added to the config.
+    ///
+    /// The method is not available for `wasm32` builds.
+    #[cfg(not(target_arch = "wasm32"))]
+    pub fn try_with_auto_locales(self, path: PathBuf) -> Result<Self, Error> {
+        if path.is_dir() {
+            let files = find_ftl_files(&path)?;
+            files
+                .into_iter()
+                .try_fold(self, |acc, file| acc.with_auto_pathbuf(file))
+        } else if is_ftl_file(&path) {
+            self.with_auto_pathbuf(path)
+        } else {
+            Err(Error::InvalidPath(path.to_string_lossy().to_string()))
+        }
+    }
+
+    #[cfg(not(target_arch = "wasm32"))]
+    fn with_auto_pathbuf(self, file: PathBuf) -> Result<Self, Error> {
+        assert!(is_ftl_file(&file));
+
+        let stem = file.file_stem().ok_or_else(|| {
+            Error::InvalidLanguageId(format!("No file stem: '{}'", file.display()))
+        })?;
+
+        let id_str = stem.to_str().ok_or_else(|| {
+            Error::InvalidLanguageId(format!("Cannot convert: {}", stem.to_string_lossy()))
+        })?;
+
+        let id = LanguageIdentifier::from_bytes(id_str.as_bytes())
+            .map_err(|e| Error::InvalidLanguageId(e.to_string()))?;
+
+        Ok(self.with_locale((id, file)))
+    }
+
+    /// Add multiple locales from given folder, based on their filename.
+    ///
+    /// Will panic! on error.
+    ///
+    /// The method is not available for `wasm32` builds.
+    #[cfg(not(target_arch = "wasm32"))]
+    pub fn with_auto_locales(self, path: PathBuf) -> Self {
+        let path_name = path.display().to_string();
+        let result = self.try_with_auto_locales(path);
+        match result {
+            Ok(result) => result,
+            Err(err) => panic!(
+                "with_auto_locales must have valid pathbuf {}: {}",
+                path_name, err
+            ),
+        }
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+fn find_ftl_files(folder: &PathBuf) -> Result<Vec<PathBuf>, Error> {
+    let ftl_files: Vec<PathBuf> = WalkDir::new(folder)
+        .into_iter()
+        .filter_map(|entry| entry.ok())
+        .filter(|entry| is_ftl_file(entry.path()))
+        .map(|entry| entry.path().to_path_buf())
+        .collect();
+
+    Ok(ftl_files)
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+fn is_ftl_file(entry: &Path) -> bool {
+    entry.is_file() && entry.extension().map(|ext| ext == "ftl").unwrap_or(false)
+}
+
+/// Initialize an i18n provider.
+pub fn try_use_init_i18n(init: impl FnOnce() -> I18nConfig) -> Result<I18n, Error> {
+    use_context_provider(move || {
+        // Coverage false -ve: See https://github.com/xd009642/tarpaulin/issues/1675
+        let I18nConfig {
+            id,
+            fallback,
+            locale_resources,
+            locales,
+        } = init();
+
+        I18n::try_new(id, fallback, locale_resources, locales)
+    })
+}
+
+/// Initialize an i18n provider.
+pub fn use_init_i18n(init: impl FnOnce() -> I18nConfig) -> I18n {
+    use_context_provider(move || {
+        // Coverage false -ve: See https://github.com/xd009642/tarpaulin/issues/1675
+        let I18nConfig {
+            id,
+            fallback,
+            locale_resources,
+            locales,
+        } = init();
+
+        match I18n::try_new(id, fallback, locale_resources, locales) {
+            Ok(i18n) => i18n,
+            Err(e) => panic!("Failed to create I18n context: {}", e),
+        }
+    })
+}
+
+#[derive(Clone, Copy)]
+pub struct I18n {
+    selected_language: Signal<LanguageIdentifier>,
+    fallback_language: Signal<Option<LanguageIdentifier>>,
+    locale_resources: Signal<Vec<LocaleResource>>,
+    locales: Signal<HashMap<LanguageIdentifier, usize>>,
+    active_bundle: Signal<FluentBundle<FluentResource>>,
+}
+
+impl I18n {
+    pub fn try_new(
+        selected_language: LanguageIdentifier,
+        fallback_language: Option<LanguageIdentifier>,
+        locale_resources: Vec<LocaleResource>,
+        locales: HashMap<LanguageIdentifier, usize>,
+    ) -> Result<Self, Error> {
+        let bundle = try_create_bundle(
+            &selected_language,
+            &fallback_language,
+            &locale_resources,
+            &locales,
+        )?;
+        Ok(Self {
+            selected_language: Signal::new(selected_language),
+            fallback_language: Signal::new(fallback_language),
+            locale_resources: Signal::new(locale_resources),
+            locales: Signal::new(locales),
+            active_bundle: Signal::new(bundle),
+        })
+    }
+
+    pub fn new(
+        selected_language: LanguageIdentifier,
+        fallback_language: Option<LanguageIdentifier>,
+        locale_resources: Vec<LocaleResource>,
+        locales: HashMap<LanguageIdentifier, usize>,
+    ) -> Self {
+        let result = Self::try_new(
+            selected_language,
+            fallback_language,
+            locale_resources,
+            locales,
+        );
+        match result {
+            Ok(i18n) => i18n,
+            Err(err) => panic!("I18n cannot be created: {}", err),
+        }
+    }
+
+    pub fn try_translate_with_args(
+        &self,
+        msg: &str,
+        args: Option<&FluentArgs>,
+    ) -> Result<String, Error> {
+        let (message_id, attribute_name) = Self::decompose_identifier(msg)?;
+
+        let bundle = self.active_bundle.read();
+
+        let message = bundle
+            .get_message(message_id)
+            .ok_or_else(|| Error::MessageIdNotFound(message_id.into()))?;
+
+        let pattern = if let Some(attribute_name) = attribute_name {
+            let attribute = message
+                .get_attribute(attribute_name)
+                .ok_or_else(|| Error::AttributeIdNotFound(msg.to_string()))?;
+            attribute.value()
+        } else {
+            message
+                .value()
+                .ok_or_else(|| Error::MessagePatternNotFound(message_id.into()))?
+        };
+
+        let mut errors = vec![];
+        let translation = bundle
+            .format_pattern(pattern, args, &mut errors)
+            .to_string();
+
+        (errors.is_empty())
+            .then_some(translation)
+            .ok_or_else(|| Error::FluentErrorsDetected(format!("{:#?}", errors)))
+    }
+
+    pub fn decompose_identifier(msg: &str) -> Result<(&str, Option<&str>), Error> {
+        let parts: Vec<&str> = msg.split('.').collect();
+        match parts.as_slice() {
+            [message_id] => Ok((message_id, None)),
+            [message_id, attribute_name] => Ok((message_id, Some(attribute_name))),
+            _ => Err(Error::InvalidMessageId(msg.to_string())),
+        }
+    }
+
+    pub fn translate_with_args(&self, msg: &str, args: Option<&FluentArgs>) -> String {
+        let result = self.try_translate_with_args(msg, args);
+        match result {
+            Ok(translation) => translation,
+            Err(err) => panic!("Failed to translate {}: {}", msg, err),
+        }
+    }
+
+    #[inline]
+    pub fn try_translate(&self, msg: &str) -> Result<String, Error> {
+        self.try_translate_with_args(msg, None)
+    }
+
+    pub fn translate(&self, msg: &str) -> String {
+        let result = self.try_translate(msg);
+        match result {
+            Ok(translation) => translation,
+            Err(err) => panic!("Failed to translate {}: {}", msg, err),
+        }
+    }
+
+    /// Get the selected language.
+    #[inline]
+    pub fn language(&self) -> LanguageIdentifier {
+        self.selected_language.read().clone()
+    }
+
+    /// Get the fallback language.
+    pub fn fallback_language(&self) -> Option<LanguageIdentifier> {
+        self.fallback_language.read().clone()
+    }
+
+    /// Update the selected language.
+    pub fn try_set_language(&mut self, id: LanguageIdentifier) -> Result<(), Error> {
+        *self.selected_language.write() = id;
+        self.try_update_active_bundle()
+    }
+
+    /// Update the selected language.
+    pub fn set_language(&mut self, id: LanguageIdentifier) {
+        let id_name = id.to_string();
+        let result = self.try_set_language(id);
+        match result {
+            Ok(()) => (),
+            Err(err) => panic!("cannot set language {}: {}", id_name, err),
+        }
+    }
+
+    /// Update the fallback language.
+    pub fn try_set_fallback_language(&mut self, id: LanguageIdentifier) -> Result<(), Error> {
+        self.locales
+            .read()
+            .get(&id)
+            .ok_or_else(|| Error::FallbackMustHaveLocale(id.to_string()))?;
+
+        *self.fallback_language.write() = Some(id);
+        self.try_update_active_bundle()
+    }
+
+    /// Update the fallback language.
+    pub fn set_fallback_language(&mut self, id: LanguageIdentifier) {
+        let id_name = id.to_string();
+        let result = self.try_set_fallback_language(id);
+        match result {
+            Ok(()) => (),
+            Err(err) => panic!("cannot set fallback language {}: {}", id_name, err),
+        }
+    }
+
+    fn try_update_active_bundle(&mut self) -> Result<(), Error> {
+        let bundle = try_create_bundle(
+            &self.selected_language.peek(),
+            &self.fallback_language.peek(),
+            &self.locale_resources.peek(),
+            &self.locales.peek(),
+        )?;
+
+        self.active_bundle.set(bundle);
+        Ok(())
+    }
+}
+
+fn try_create_bundle(
+    selected_language: &LanguageIdentifier,
+    fallback_language: &Option<LanguageIdentifier>,
+    locale_resources: &[LocaleResource],
+    locales: &HashMap<LanguageIdentifier, usize>,
+) -> Result<FluentBundle<FluentResource>, Error> {
+    let add_resource = move |bundle: &mut FluentBundle<FluentResource>,
+                             langid: &LanguageIdentifier,
+                             locale_resources: &[LocaleResource]| {
+        if let Some(&i) = locales.get(langid) {
+            let resource = &locale_resources[i];
+            let resource =
+                FluentResource::try_new(resource.try_to_resource_string()?).map_err(|e| {
+                    Error::FluentErrorsDetected(format!("resource langid: {}\n{:#?}", langid, e))
+                })?;
+            bundle.add_resource_overriding(resource);
+        };
+        Ok(())
+    };
+
+    let mut bundle = FluentBundle::new(vec![selected_language.clone()]);
+    if let Some(fallback_language) = fallback_language {
+        add_resource(&mut bundle, fallback_language, locale_resources)?;
+    }
+
+    let (language, script, region, variants) = selected_language.clone().into_parts();
+    let variants_lang = LanguageIdentifier::from_parts(language, script, region, &variants);
+    let region_lang = LanguageIdentifier::from_parts(language, script, region, &[]);
+    let script_lang = LanguageIdentifier::from_parts(language, script, None, &[]);
+    let language_lang = LanguageIdentifier::from_parts(language, None, None, &[]);
+
+    add_resource(&mut bundle, &language_lang, locale_resources)?;
+    add_resource(&mut bundle, &script_lang, locale_resources)?;
+    add_resource(&mut bundle, &region_lang, locale_resources)?;
+    add_resource(&mut bundle, &variants_lang, locale_resources)?;
+
+    /* Add this code when the fluent crate includes FluentBundle::add_builtins.
+     * This will allow the use of built-in functions like `NUMBER` and `DATETIME`.
+     * See [Fluent issue](https://github.com/projectfluent/fluent-rs/issues/181) for more information.
+    bundle
+        .add_builtins()
+        .map_err(|e| Error::FluentErrorsDetected(e.to_string()))?;
+    */
+
+    Ok(bundle)
+}
+
+pub fn i18n() -> I18n {
+    consume_context()
+}
+
+#[cfg(test)]
+mod test {
+    use super::*;
+    use pretty_assertions::assert_eq;
+    use unic_langid::langid;
+
+    #[test]
+    fn can_add_locale_to_config_explicit_locale() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_B: LanguageIdentifier = langid!("la-LB");
+        const LANG_C: LanguageIdentifier = langid!("la-LC");
+
+        let config = I18nConfig::new(LANG_A)
+            .with_locale(Locale::new_static(LANG_B, "lang = lang_b"))
+            .with_locale(Locale::new_dynamic(LANG_C, PathBuf::new()));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![
+                    LocaleResource::Static("lang = lang_b"),
+                    LocaleResource::Path(PathBuf::new()),
+                ],
+                locales: HashMap::from([(LANG_B, 0), (LANG_C, 1)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_add_locale_to_config_implicit_locale() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_B: LanguageIdentifier = langid!("la-LB");
+        const LANG_C: LanguageIdentifier = langid!("la-LC");
+
+        let config = I18nConfig::new(LANG_A)
+            .with_locale((LANG_B, "lang = lang_b"))
+            .with_locale((LANG_C, PathBuf::new()));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![
+                    LocaleResource::Static("lang = lang_b"),
+                    LocaleResource::Path(PathBuf::new())
+                ],
+                locales: HashMap::from([(LANG_B, 0), (LANG_C, 1)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_add_locale_string_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_B: LanguageIdentifier = langid!("la-LB");
+
+        let config = I18nConfig::new(LANG_A).with_locale((LANG_B, "lang = lang_b"));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![LocaleResource::Static("lang = lang_b")],
+                locales: HashMap::from([(LANG_B, 0)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_add_shared_locale_string_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_B: LanguageIdentifier = langid!("la-LB");
+        const LANG_C: LanguageIdentifier = langid!("la-LC");
+
+        let shared_string = "lang = a language";
+        let config = I18nConfig::new(LANG_A)
+            .with_locale((LANG_B, shared_string))
+            .with_locale((LANG_C, shared_string));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![LocaleResource::Static(shared_string)],
+                locales: HashMap::from([(LANG_B, 0), (LANG_C, 0)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_add_locale_pathbuf_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_C: LanguageIdentifier = langid!("la-LC");
+
+        let config = I18nConfig::new(LANG_A)
+            .with_locale((LANG_C, PathBuf::from("./test/data/fallback/la.ftl")));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![LocaleResource::Path(PathBuf::from(
+                    "./test/data/fallback/la.ftl"
+                ))],
+                locales: HashMap::from([(LANG_C, 0)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_add_shared_locale_pathbuf_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+        const LANG_B: LanguageIdentifier = langid!("la-LB");
+        const LANG_C: LanguageIdentifier = langid!("la-LC");
+
+        let shared_pathbuf = PathBuf::from("./test/data/fallback/la.ftl");
+
+        let config = I18nConfig::new(LANG_A)
+            .with_locale((LANG_B, shared_pathbuf.clone()))
+            .with_locale((LANG_C, shared_pathbuf.clone()));
+
+        assert_eq!(
+            config,
+            I18nConfig {
+                id: LANG_A,
+                fallback: None,
+                locale_resources: vec![LocaleResource::Path(shared_pathbuf)],
+                locales: HashMap::from([(LANG_B, 0), (LANG_C, 0)]),
+            }
+        );
+    }
+
+    #[test]
+    fn can_auto_add_locales_folder_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+
+        let root_path_str = &format!("{}/tests/data/fallback/", env!("CARGO_MANIFEST_DIR"));
+        let pathbuf = PathBuf::from(root_path_str);
+
+        let config = I18nConfig::new(LANG_A)
+            .try_with_auto_locales(pathbuf)
+            .ok()
+            .unwrap();
+
+        let expected_locales = [
+            "fb-FB",
+            "la",
+            "la-Scpt",
+            "la-Scpt-LA",
+            "la-Scpt-LA-variants",
+        ];
+
+        assert_eq!(config.locales.len(), expected_locales.len());
+        assert_eq!(config.locale_resources.len(), expected_locales.len());
+
+        expected_locales.into_iter().for_each(|l| {
+            let expected_filename = format!("{root_path_str}/{l}.ftl");
+            let id = LanguageIdentifier::from_bytes(l.as_bytes()).unwrap();
+            assert!(config.locales.get(&id).is_some());
+            assert!(config
+                .locale_resources
+                .contains(&LocaleResource::Path(PathBuf::from(expected_filename))));
+        });
+    }
+
+    #[test]
+    fn can_auto_add_locales_file_to_config() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+
+        let path_str = &format!(
+            "{}/tests/data/fallback/fb-FB.ftl",
+            env!("CARGO_MANIFEST_DIR")
+        );
+        let pathbuf = PathBuf::from(path_str);
+
+        let config = I18nConfig::new(LANG_A)
+            .try_with_auto_locales(pathbuf.clone())
+            .ok()
+            .unwrap();
+
+        assert_eq!(config.locales.len(), 1);
+        assert!(config.locales.get(&langid!("fb-FB")).is_some());
+
+        assert_eq!(config.locale_resources.len(), 1);
+        assert!(config
+            .locale_resources
+            .contains(&LocaleResource::Path(pathbuf)));
+    }
+
+    #[test]
+    fn will_fail_auto_locales_with_invalid_folder() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+
+        let root_path_str = &format!("{}/non_existing_path/", env!("CARGO_MANIFEST_DIR"));
+        let pathbuf = PathBuf::from(root_path_str);
+
+        let config = I18nConfig::new(LANG_A).try_with_auto_locales(pathbuf);
+        assert_eq!(config.is_err(), true);
+    }
+
+    #[test]
+    fn will_fail_auto_locales_with_invalid_file() {
+        const LANG_A: LanguageIdentifier = langid!("la-LA");
+
+        let path_str = &format!(
+            "{}/tests/data/fallback/invalid_language_id.ftl",
+            env!("CARGO_MANIFEST_DIR")
+        );
+        let pathbuf = PathBuf::from(path_str);
+
+        let config = I18nConfig::new(LANG_A).try_with_auto_locales(pathbuf);
+        assert_eq!(config.is_err(), true);
+    }
+}
--- a/dioxus-i18n/tests/README.md
+++ b/dioxus-i18n/tests/README.md
@@ -0,0 +1,13 @@
+# Note
+
+//*****************************************************************************
+//
+// This set of tests takes a heavy handed approach to errors, whereby the
+// process is exited. This is done because panic! and assert_eq! failures
+// are trapped within `dioxus::runtime::RuntimeGuard`.
+// Unfortunately panic! is still made silent.
+//
+// Errors will be shown with:
+// cargo test -- --nocapture
+//
+//*****************************************************************************
--- a/dioxus-i18n/tests/common/mod.rs
+++ b/dioxus-i18n/tests/common/mod.rs
@@ -0,0 +1,3 @@
+mod test_hook;
+
+pub(crate) use test_hook::test_hook;
--- a/dioxus-i18n/tests/common/test_hook.rs
+++ b/dioxus-i18n/tests/common/test_hook.rs
@@ -0,0 +1,85 @@
+// Lifted from: https://dioxuslabs.com/learn/0.6/cookbook/testing
+//
+// Much curtialed functionality and massaged to use in the local testing
+// here. This hook isn't intended for reuse.
+//
+
+use dioxus::{dioxus_core::NoOpMutations, prelude::*};
+use futures::FutureExt;
+
+use std::{cell::RefCell, fmt::Debug, rc::Rc};
+
+pub(crate) fn test_hook<V: 'static>(
+    initialize: impl FnMut() -> V + 'static,
+    check: impl FnMut(V, &mut Assertions) + 'static,
+) {
+    #[derive(Props)]
+    struct MockAppComponent<I: 'static, C: 'static> {
+        hook: Rc<RefCell<I>>,
+        check: Rc<RefCell<C>>,
+    }
+
+    impl<I, C> PartialEq for MockAppComponent<I, C> {
+        fn eq(&self, _: &Self) -> bool {
+            true
+        }
+    }
+
+    impl<I, C> Clone for MockAppComponent<I, C> {
+        fn clone(&self) -> Self {
+            Self {
+                hook: self.hook.clone(),
+                check: self.check.clone(),
+            }
+        }
+    }
+
+    fn mock_app<I: FnMut() -> V, C: FnMut(V, &mut Assertions), V>(
+        props: MockAppComponent<I, C>,
+    ) -> Element {
+        let value = props.hook.borrow_mut()();
+
+        let mut assertions = Assertions::new();
+
+        props.check.borrow_mut()(value, &mut assertions);
+
+        rsx! { div {} }
+    }
+
+    let mut vdom = VirtualDom::new_with_props(
+        mock_app,
+        MockAppComponent {
+            hook: Rc::new(RefCell::new(initialize)),
+            check: Rc::new(RefCell::new(check)),
+        },
+    );
+
+    vdom.rebuild_in_place();
+
+    while vdom.wait_for_work().now_or_never().is_some() {
+        vdom.render_immediate(&mut NoOpMutations);
+    }
+
+}
+
+#[derive(Debug)]
+pub(crate) struct Assertions {}
+
+impl Assertions {
+    pub fn new() -> Self {
+        Self {}
+    }
+
+    pub fn assert<T>(&mut self, actual: T, expected: T, id: &str)
+    where
+        T: PartialEq + Debug,
+    {
+        if actual != expected {
+            eprintln!(
+                "***** ERROR in {}: actual: '{:?}' != expected: '{:?}' *****\n",
+                id, actual, expected
+            );
+            std::process::exit(-1);
+        };
+    }
+}
--- a/dioxus-i18n/tests/data/fallback/fb-FB.ftl
+++ b/dioxus-i18n/tests/data/fallback/fb-FB.ftl
@@ -0,0 +1,5 @@
+fallback = fallback only
+language = fallback language
+script = fallback script
+region = fallback region
+variants = fallback variants
--- a/dioxus-i18n/tests/data/fallback/la-Scpt-LA-variants.ftl
+++ b/dioxus-i18n/tests/data/fallback/la-Scpt-LA-variants.ftl
@@ -0,0 +1 @@
+variants = variants only
--- a/dioxus-i18n/tests/data/fallback/la-Scpt-LA.ftl
+++ b/dioxus-i18n/tests/data/fallback/la-Scpt-LA.ftl
@@ -0,0 +1,2 @@
+region = region only
+variants = region variants
--- a/dioxus-i18n/tests/data/fallback/la-Scpt.ftl
+++ b/dioxus-i18n/tests/data/fallback/la-Scpt.ftl
@@ -0,0 +1,3 @@
+script = script only
+region = script region
+variants = script variants
--- a/dioxus-i18n/tests/data/fallback/la.ftl
+++ b/dioxus-i18n/tests/data/fallback/la.ftl
@@ -0,0 +1,4 @@
+language = language only
+script = language script
+region = language region
+variants = language variants
--- a/dioxus-i18n/tests/data/i18n/en.ftl
+++ b/dioxus-i18n/tests/data/i18n/en.ftl
@@ -0,0 +1,5 @@
+hello = Hello, {$name}!
+simple = Hello, Zaphod!
+my_component = My Component
+    .placeholder = Component's placeholder
+    .hint = Component's hint with parameter {$name}
--- a/dioxus-i18n/tests/defects_spec.rs
+++ b/dioxus-i18n/tests/defects_spec.rs
@@ -0,0 +1,44 @@
+mod common;
+use common::*;
+
+use dioxus_i18n::{
+    prelude::{use_init_i18n, I18n, I18nConfig},
+    t,
+};
+use unic_langid::{langid, LanguageIdentifier};
+
+#[test]
+fn issue_15_recent_change_to_t_macro_unnecessarily_breaks_v0_3_code_test_attr() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            t!(&format!("hello"), name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "translate_from_static_source");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "translate_from_static_source",
+        );
+    });
+}
+
+#[test]
+fn issue_15_recent_change_to_t_macro_unnecessarily_breaks_v0_3_code_test_no_attr() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| t!(&format!("simple")));
+        proxy.assert(panic.is_ok(), true, "translate_from_static_source");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, Zaphod!".to_string(),
+            "translate_from_static_source",
+        );
+    });
+}
+
+const EN: LanguageIdentifier = langid!("en");
+
+fn i18n_from_static() -> I18n {
+    let config = I18nConfig::new(EN).with_locale((EN, include_str!("./data/i18n/en.ftl")));
+    use_init_i18n(|| config)
+}
--- a/dioxus-i18n/tests/graceful_fallback_spec.rs
+++ b/dioxus-i18n/tests/graceful_fallback_spec.rs
@@ -0,0 +1,99 @@
+mod common;
+use common::*;
+
+use dioxus_i18n::prelude::{use_init_i18n, I18n, I18nConfig};
+use unic_langid::{langid, LanguageIdentifier};
+
+#[test]
+fn exact_locale_match_will_use_translation() {
+    test_hook(i18n, |value, proxy| {
+        proxy.assert(
+            value
+                .try_translate("variants")
+                .expect("test message id must exist"),
+            "variants only".to_string(),
+            "exact_locale_match_will_use_translation",
+        );
+    });
+}
+
+#[test]
+fn non_exact_locale_match_will_use_region() {
+    test_hook(i18n, |value, proxy| {
+        proxy.assert(
+            value
+                .try_translate("region")
+                .expect("test message id must exist"),
+            "region only".to_string(),
+            "non_exact_locale_match_will_use_region",
+        );
+    });
+}
+
+#[test]
+fn non_exact_locale_match_will_use_script() {
+    test_hook(i18n, |value, proxy| {
+        proxy.assert(
+            value
+                .try_translate("script")
+                .expect("test message id must exist"),
+            "script only".to_string(),
+            "non_exact_locale_match_will_use_script",
+        );
+    });
+}
+
+#[test]
+fn non_exact_locale_match_will_use_language() {
+    test_hook(i18n, |value, proxy| {
+        proxy.assert(
+            value
+                .try_translate("language")
+                .expect("test message id must exist"),
+            "language only".to_string(),
+            "non_exact_locale_match_will_use_language",
+        );
+    });
+}
+
+#[test]
+fn no_locale_match_will_use_fallback() {
+    test_hook(i18n, |value, proxy| {
+        proxy.assert(
+            value
+                .try_translate("fallback")
+                .expect("test message id must exist"),
+            "fallback only".to_string(),
+            "no_locale_match_will_use_fallback",
+        );
+    });
+}
+
+fn i18n() -> I18n {
+    const FALLBACK_LANG: LanguageIdentifier = langid!("fb-FB");
+    const LANGUAGE_LANG: LanguageIdentifier = langid!("la");
+    const SCRIPT_LANG: LanguageIdentifier = langid!("la-Scpt");
+    const REGION_LANG: LanguageIdentifier = langid!("la-Scpt-LA");
+    let variants_lang: LanguageIdentifier = langid!("la-Scpt-LA-variants");
+
+    let config = I18nConfig::new(variants_lang.clone())
+        .with_locale((LANGUAGE_LANG, include_str!("../tests/data/fallback/la.ftl")))
+        .with_locale((
+            SCRIPT_LANG,
+            include_str!("../tests/data/fallback/la-Scpt.ftl"),
+        ))
+        .with_locale((
+            REGION_LANG,
+            include_str!("../tests/data/fallback/la-Scpt-LA.ftl"),
+        ))
+        .with_locale((
+            variants_lang.clone(),
+            include_str!("../tests/data/fallback/la-Scpt-LA-variants.ftl"),
+        ))
+        .with_locale((
+            FALLBACK_LANG,
+            include_str!("../tests/data/fallback/fb-FB.ftl"),
+        ))
+        .with_fallback(FALLBACK_LANG);
+    use_init_i18n(|| config)
+}
--- a/dioxus-i18n/tests/macro_reexport_spec.rs
+++ b/dioxus-i18n/tests/macro_reexport_spec.rs
@@ -0,0 +1,85 @@
+// Test that macros work correctly when re-exported from another module
+// This verifies that $crate is used correctly instead of hard-coded dioxus_i18n
+
+mod reexport_module {
+    // Re-export the macros as if they were from a different crate
+    pub use dioxus_i18n::{t, te, tid};
+}
+
+mod common;
+use common::*;
+
+use dioxus_i18n::prelude::{use_init_i18n, I18n, I18nConfig};
+use unic_langid::{langid, LanguageIdentifier};
+
+#[test]
+fn reexported_t_macro_works() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            reexport_module::t!("hello", name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "reexported_t_macro_works");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "reexported_t_macro_works",
+        );
+    });
+}
+
+#[test]
+fn reexported_te_macro_works() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            reexport_module::te!("hello", name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "reexported_te_macro_works");
+        proxy.assert(
+            panic.ok().unwrap().ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "reexported_te_macro_works",
+        );
+    });
+}
+
+#[test]
+fn reexported_tid_macro_works() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            reexport_module::tid!("hello", name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "reexported_tid_macro_works");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "reexported_tid_macro_works",
+        );
+    });
+}
+
+#[test]
+fn reexported_macro_with_invalid_key_as_error() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| reexport_module::te!("invalid"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "reexported_macro_with_invalid_key_as_error",
+        );
+        proxy.assert(
+            panic.ok().unwrap().err().unwrap().to_string(),
+            "message id not found for key: 'invalid'".to_string(),
+            "reexported_macro_with_invalid_key_as_error",
+        );
+    });
+}
+
+const EN: LanguageIdentifier = langid!("en");
+
+fn i18n_from_static() -> I18n {
+    let config = I18nConfig::new(EN).with_locale((EN, include_str!("./data/i18n/en.ftl")));
+    use_init_i18n(|| config)
+}
--- a/dioxus-i18n/tests/translations_spec.rs
+++ b/dioxus-i18n/tests/translations_spec.rs
@@ -0,0 +1,343 @@
+mod common;
+use common::*;
+
+use dioxus_i18n::{
+    prelude::{use_init_i18n, I18n, I18nConfig},
+    t, te, tid,
+};
+use unic_langid::{langid, LanguageIdentifier};
+
+use std::path::PathBuf;
+
+#[test]
+fn translate_from_static_source() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            t!("hello", name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "translate_from_static_source");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "translate_from_static_source",
+        );
+    });
+}
+
+#[test]
+fn failed_to_translate_with_invalid_key() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let _ = &t!("invalid");
+        });
+        proxy.assert(panic.is_err(), true, "failed_to_translate_with_invalid_key");
+    });
+}
+
+#[test]
+fn failed_to_translate_with_invalid_key_as_error() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| te!("invalid"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "failed_to_translate_with_invalid_key_as_error",
+        );
+        proxy.assert(
+            panic.ok().unwrap().err().unwrap().to_string(),
+            "message id not found for key: 'invalid'".to_string(),
+            "failed_to_translate_with_invalid_key_as_error",
+        );
+    });
+}
+
+#[test]
+fn failed_to_translate_with_invalid_key_with_args_as_error() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| te!("invalid", name: "<don't care>"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "failed_to_translate_with_invalid_key_with_args_as_error",
+        );
+        proxy.assert(
+            panic.ok().unwrap().err().unwrap().to_string(),
+            "message id not found for key: 'invalid'".to_string(),
+            "failed_to_translate_with_invalid_key_with_args_as_error",
+        );
+    });
+}
+
+#[test]
+fn failed_to_translate_with_invalid_key_as_id() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("invalid"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "failed_to_translate_with_invalid_key_as_id",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "message id not found for key: 'invalid'".to_string(),
+            "failed_to_translate_with_invalid_key_as_id",
+        );
+    });
+}
+
+#[test]
+fn failed_to_translate_with_invalid_key_with_args_as_id() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("invalid", name: "<don't care>"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "failed_to_translate_with_invalid_key_with_args_as_id",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "message id not found for key: 'invalid'".to_string(),
+            "failed_to_translate_with_invalid_key_with_args_as_id",
+        );
+    });
+}
+
+#[test]
+fn translate_root_message_in_attributed_definition() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "translate_root_message_in_attributed_definition",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "My Component".to_string(),
+            "translate_root_message_in_attributed_definition",
+        );
+    });
+}
+
+#[test]
+fn translate_attribute_with_no_args_in_attributed_definition() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component.placeholder"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "translate_attribute_with_no_args_in_attributed_definition",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Component's placeholder".to_string(),
+            "translate_attribute_with_no_args_in_attributed_definition",
+        );
+    });
+}
+
+#[test]
+fn translate_attribute_with_args_in_attributed_definition() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component.hint", name: "Zaphod"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "translate_attribute_with_args_in_attributed_definition",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Component's hint with parameter \u{2068}Zaphod\u{2069}".to_string(),
+            "translate_attribute_with_args_in_attributed_definition",
+        );
+    });
+}
+
+#[test]
+fn fail_translate_invalid_attribute_with_no_args_in_attributed_definition() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component.not_a_placeholder"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "fail_translate_invalid_attribute_with_no_args_in_attributed_definition",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "attribute id not found for key: 'my_component.not_a_placeholder'".to_string(),
+            "fail_translate_invalid_attribute_with_no_args_in_attributed_definition",
+        );
+    });
+}
+
+#[test]
+fn fail_translate_invalid_attribute_with_args_in_attributed_definition() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component.not_a_hint", name: "Zaphod"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "fail_translate_invalid_attribute_with_args_in_attributed_definition",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "attribute id not found for key: 'my_component.not_a_hint'".to_string(),
+            "fail_translate_invalid_attribute_with_args_in_attributed_definition",
+        );
+    });
+}
+
+#[test]
+fn fail_translate_with_invalid_attribute_key() {
+    test_hook(i18n_from_static, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| tid!("my_component.placeholder.invalid"));
+        proxy.assert(
+            panic.is_ok(),
+            true,
+            "fail_translate_with_invalid_attribute_key",
+        );
+        proxy.assert(
+            panic.ok().unwrap(),
+            "invalid message id: 'my_component.placeholder.invalid'".to_string(),
+            "fail_translate_with_invalid_attribute_key",
+        );
+    });
+}
+
+#[test]
+fn translate_from_dynamic_source() {
+    test_hook(i18n_from_dynamic, |_, proxy| {
+        let panic = std::panic::catch_unwind(|| {
+            let name = "World";
+            t!("hello", name: name)
+        });
+        proxy.assert(panic.is_ok(), true, "translate_from_dynamic_source");
+        proxy.assert(
+            panic.ok().unwrap(),
+            "Hello, \u{2068}World\u{2069}!".to_string(),
+            "translate_from_dynamic_source",
+        );
+    });
+}
+
+#[test]
+#[should_panic]
+#[ignore] // Panic hidden within test_hook.
+fn fail_translate_from_dynamic_source_when_file_does_not_exist() {
+    test_hook(i18n_from_dynamic_none_existing, |_, _| unreachable!());
+}
+
+#[test]
+fn initial_language_is_set() {
+    test_hook(i18n_from_static, |value, proxy| {
+        proxy.assert(value.language(), EN, "initial_language_is_set");
+    });
+}
+
+#[test]
+fn language_can_be_set() {
+    test_hook(i18n_from_static, |mut value, proxy| {
+        value
+            .try_set_language(JP)
+            .expect("set_language must succeed");
+        proxy.assert(value.language(), JP, "language_can_be_set");
+    });
+}
+
+#[test]
+fn no_default_fallback_language() {
+    test_hook(i18n_from_static, |value, proxy| {
+        proxy.assert(
+            format!("{:?}", value.fallback_language()),
+            "None".to_string(),
+            "no_default_fallback_language",
+        );
+    });
+}
+
+#[test]
+fn some_default_fallback_language() {
+    test_hook(i18n_from_static_with_fallback, |value, proxy| {
+        proxy.assert(
+            format!("{:?}", value.fallback_language().map(|l| l.to_string())),
+            "Some(\"jp\")".to_string(),
+            "some_default_fallback_language",
+        );
+    });
+}
+
+#[test]
+fn fallback_language_can_be_set() {
+    test_hook(i18n_from_static_with_fallback, |mut value, proxy| {
+        value
+            .try_set_fallback_language(EN)
+            .expect("try_set_fallback_language must succeed");
+        proxy.assert(
+            format!("{:?}", value.fallback_language().map(|l| l.to_string())),
+            "Some(\"en\")".to_string(),
+            "fallback_language_can_be_set",
+        );
+    });
+}
+
+#[test]
+fn fallback_language_must_have_locale_translation() {
+    test_hook(i18n_from_static_with_fallback, |mut value, proxy| {
+        let result = value.try_set_fallback_language(IT);
+
+        proxy.assert(
+            result.is_err(),
+            true,
+            "fallback_language_must_have_locale_translation",
+        );
+        proxy.assert(
+            result.err().unwrap().to_string(),
+            "fallback for \"it\" must have locale".to_string(),
+            "fallback_language_must_have_locale_translation",
+        );
+        proxy.assert(
+            format!("{:?}", value.fallback_language().map(|l| l.to_string())),
+            "Some(\"jp\")".to_string(),
+            "fallback_language_must_have_locale_translation",
+        );
+    });
+}
+
+const EN: LanguageIdentifier = langid!("en");
+const IT: LanguageIdentifier = langid!("it");
+const JP: LanguageIdentifier = langid!("jp");
+
+fn i18n_from_static() -> I18n {
+    let config = I18nConfig::new(EN).with_locale((EN, include_str!("./data/i18n/en.ftl")));
+    use_init_i18n(|| config)
+}
+
+fn i18n_from_static_with_fallback() -> I18n {
+    let config = I18nConfig::new(EN)
+        .with_locale((EN, include_str!("./data/i18n/en.ftl")))
+        .with_fallback(JP);
+    use_init_i18n(|| config)
+}
+
+fn i18n_from_dynamic() -> I18n {
+    let config = I18nConfig::new(EN).with_locale((
+        EN,
+        PathBuf::from(format!(
+            "{}/tests/data/i18n/en.ftl",
+            env!("CARGO_MANIFEST_DIR")
+        )),
+    ));
+    use_init_i18n(|| config)
+}
+
+fn i18n_from_dynamic_none_existing() -> I18n {
+    let config = I18nConfig::new(EN).with_locale((
+        EN,
+        PathBuf::from(format!(
+            "{}/tests/data/i18n/non_existing.ftl",
+            env!("CARGO_MANIFEST_DIR")
+        )),
+    ));
+    use_init_i18n(|| config)
+}
--- a/docker/prod/app/Dockerfile
+++ b/docker/prod/app/Dockerfile
@@ -21,7 +21,7 @@ ENV ANDROID_SDK_ROOT=/opt/android-sdk
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]

 RUN apt-get update && apt-get install -y --no-install-recommends \
-    openjdk-17-jdk-headless=17.0.17+10-1~deb12u1 \
+    openjdk-17-jdk-headless=17.0.18+8-1~deb12u1 \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/* \
 && rustup target add aarch64-linux-android \
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,3 @@
+# About this branch
+
+This branch is just about the changes made to Dioxus in my fork. It was also required to add dioxus-free-icons and dioxus-i18n with the Dioxus dependency edited to the fork. Once the changes from https://github.com/DioxusLabs/dioxus/pull/5248 get released, just set the dependency on the main branch to the released version and then it is safe to delete this branch.
--- a/src/components/app.rs
+++ b/src/components/app.rs
@@ -1,4 +1,5 @@
 use crate::internationalization::get_language_identifier;
+
 use crate::route::Route;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
@@ -15,6 +16,7 @@ static FONTS_DIRECTORY: Asset = asset!(
 const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 const INPUT_NUMBER_ARROWS_CSS: Asset = asset!("/assets/styles/input_number_arrows.css");
 const INPUT_RANGE_CSS: Asset = asset!("/assets/styles/input_range.css");
+const SELECT_ARROW_CSS: Asset = asset!("/assets/styles/select_arrow.css");
 const MANIFEST: Asset = asset!("/assets/manifest.json");

 #[component]
@@ -36,10 +38,11 @@ pub(crate) fn App() -> Element {
        document::Stylesheet { href: TAILWIND_CSS }
        document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
        document::Stylesheet { href: INPUT_RANGE_CSS }
+        document::Stylesheet { href: SELECT_ARROW_CSS }
        document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }

        div {
-            class: "min-h-screen pt-4 pb-36 flex flex-col text-zinc-200 bg-zinc-800",
+            class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
            Router::<Route> {}
        }
    }
--- a/src/components/bottom_panel.rs
+++ b/src/components/bottom_panel.rs
@@ -1,78 +1,22 @@
-use crate::components::error_boundary_message::ErrorBoundaryMessage;
 use crate::components::navigation::Navigation;
-use crate::components::project_form::ProjectForm;
-use crate::components::task_form::TaskForm;
-use crate::models::project::Project;
-use crate::models::task::Task;
-use crate::route::Route;
 use dioxus::prelude::*;

 #[component]
-pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
-    // A signal for delaying the application of styles.
-    #[allow(clippy::redundant_closure)]
-    let mut expanded = use_signal(|| display_form());
+pub(crate) fn BottomPanel() -> Element {
    let navigation_expanded = use_signal(|| false);
-    let current_route = use_route();
-
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    use_effect(use_reactive(&display_form, move |display_form| {
-        if display_form() {
-            expanded.set(true);
-        } else {
-            spawn(async move {
-                // Necessary for a smooth – not instant – height transition.
-                #[cfg(not(feature = "server"))]
-                async_std::task::sleep(std::time::Duration::from_millis(500)).await;
-                /* The check is necessary for the situation when the user expands the panel while
-                it is being closed. */
-                if !display_form() {
-                    expanded.set(false);
-                }
-            });
-        }
-    }));

    rsx! {
        div {
            class: format!(
-                "flex flex-col pointer-events-auto bg-zinc-700/50 rounded-t-xl border-t-zinc-600 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
-                match (display_form(), current_route, navigation_expanded()) {
-                    (false, _, false) => "h-[64px]",
-                    (false, _, true) => "h-[130px]",
-                    (true, Route::ProjectsPage, _) => "h-[130px]",
-                    (true, _, _) => "h-[506px]",
+                "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
+                if navigation_expanded() {
+                    "h-[130px]"
+                } else {
+                    "h-[66px]"
                }
            ),
-            if expanded() {
-                ErrorBoundaryMessage {
-                    match current_route {
-                        Route::ProjectsPage => rsx! {
-                            ProjectForm {
-                                project: project_being_edited(),
-                                on_successful_submit: move |_| {
-                                    display_form.set(false);
-                                    project_being_edited.set(None);
-                                }
-                            }
-                        },
-                        _ => rsx! {
-                            TaskForm {
-                                task: task_being_edited(),
-                                on_successful_submit: move |_| {
-                                    display_form.set(false);
-                                    task_being_edited.set(None);
-                                }
-                            }
-                        }
-                    }
-                }
-            } else {
-                Navigation {
-                    expanded: navigation_expanded,
-                }
+            Navigation {
+                is_expanded: navigation_expanded,
            }
        }
    }
--- a/src/components/button_primary.rs
+++ b/src/components/button_primary.rs
@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ButtonPrimary(
+    class: Option<String>,
+    children: Element,
+    #[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    onclick: Option<Callback<Event<MouseData>>>,
+) -> Element {
+    rsx! {
+        button {
+            class: format!(
+                "cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] active:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] transition-all duration-150 {}",
+                class.unwrap_or("".to_owned())
+            ),
+            onclick: move |event| {
+                if let Some(onclick) = onclick {
+                    onclick.call(event);
+                }
+            },
+            ..attributes,
+            div {
+                class: "py-3.5 px-4 flex flex-row justify-center items-center bg-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] text-amber-700-muted rounded-xl transition-all duration-150",
+                {children}
+            }
+        }
+    }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matouš Volf	f5799f2993	readme	2026-01-29 10:58:07 +01:00
Matouš Volf	7ecf0f10e8	UI overhaul rebase	2026-01-28 23:07:07 +01:00
Matouš Volf	af095684a1	temp	2026-01-28 23:07:07 +01:00
Matouš Volf	b5e7ab5c48	feat: UI overhaul All checks were successful actionlint check / actionlint check (pull_request) Successful in 6s Details conventional pull request title check / conventional pull request title check (pull_request) Successful in 3s Details conventional commit messages check / conventional commit messages check (pull_request) Successful in 5s Details dotenv-linter check / dotenv-linter check (pull_request) Successful in 12s Details GitLeaks check / GitLeaks check (pull_request) Successful in 11s Details hadolint check / hadolint check (pull_request) Successful in 28s Details markdownlint check / markdownlint check (pull_request) Successful in 52s Details Prettier check / Prettier check (pull_request) Successful in 36s Details htmlhint check / htmlhint check (pull_request) Successful in 55s Details checkov check / checkov check (pull_request) Successful in 1m15s Details Stylelint check / Stylelint check (pull_request) Successful in 31s Details yamllint check / yamllint check (pull_request) Successful in 29s Details ShellCheck check / ShellCheck check (pull_request) Successful in 1m9s Details Rust check / Rust check (pull_request) Successful in 22m2s Details	2026-01-28 23:04:29 +01:00