TakinProfit.UnpluginIcons.IconParkOutline — nugetz
pkg
TakinProfit/ TakinProfit.UnpluginIcons.IconParkOutline v0.3.0 .NET Std2.1
Fable bindings for IconParkOutline icons (2658 icons) via unplugin-icons
Get Started dotnet CLI PackageReference Package Manager
$ dotnet add package TakinProfit.UnpluginIcons.IconParkOutlineReadme TakinProfit.Solid
F# bindings for Solid.js and Ionic Framework using Fable
A professional .NET monorepo providing idiomatic F# bindings for building reactive web applications with Solid.js and Ionic Framework.
📦 Packages
Package Description NuGet TakinProfit.Solid Core Solid.js reactive primitives and control flow components TakinProfit.Solid.Ionic Complete Ionic Framework component bindings (95 components)
✨ Features
🎯 Type-Safe : Full F# type safety for all Solid.js and Ionic APIs⚡ Reactive : Idiomatic bindings for Solid.js signals, memos, and effects🧩 Modular : Use Solid.js alone or with Ionic components🔄 Compatible : Targets netstandard2.1 - works with .NET 8, 9, 10+📝 Computation Expressions : Fluent, declarative syntax for building UIs🎨 95 Ionic Components : Complete coverage of Ionic Framework🚀 Production Ready : Proper NuGet packaging with native dependency management
🚀 Quick Start
Installation
# For Solid.js only
dotnet add package TakinProfit.Solid
# For Ionic + Solid.js
dotnet add package TakinProfit.Solid.Ionic
Basic Example open TakinProfit.Solid
open TakinProfit.Solid.Ionic
// Create reactive state
let count, setCount = Solid.createSignal 0
// Build UI with computation expressions
let app() =
Ion.app () {
Ion.header () {
Ion.toolbar () {
Ion.title () { "Counter App" }
}
}
Ion.content () {
Ion.button (onClick = fun _ -> setCount(count() + 1)) {
$"Count: {count()}"
}
}
}
// Render
Solid.render(app, Browser.Dom.document.getElementById("app"))
📚 Documentation
TakinProfit.Solid - Core Reactive Bindings Provides F# bindings for Solid.js reactive primitives:
Signals & Reactivity // Create signal
let count, setCount = Solid.createSignal 0
// Create memo (derived value)
let doubled = Solid.createMemo(fun () -> count() * 2)
// Create effect (side effect)
Solid.createEffect(fun () ->
printfn $"Count is now: {count()}"
)
Control Flow Components // Conditional rendering
Solid.Show(``when`` = isVisible) {
Ion.div () { "Visible content" }
}
// With fallback
Solid.Show(``when`` = isLoading, fallback = Ion.spinner () {}) {
Ion.div () { "Loaded!" }
}
// Array iteration
Solid.For(each = items) { fun item getIndex ->
Ion.li () { $"{getIndex()}: {item.name}" }
}
// Switch/Match
Solid.Switch(fallback = Ion.div () { "Default" }) {
Solid.Match(``when`` = fun () -> status() = "loading") {
Ion.spinner () {}
}
Solid.Match(``when`` = fun () -> status() = "success") {
Ion.div () { "Success!" }
}
}
TakinProfit.Solid.Ionic - Ionic Components 95 fully-typed Ionic components:
// Button with all props
Ion.button (
color = IonColor.Primary,
fill = ButtonFill.Solid,
expand = ButtonExpand.Block,
onClick = handleClick
) {
"Click Me"
}
// Card layout
Ion.card () {
Ion.cardHeader () {
Ion.cardTitle () { "Card Title" }
Ion.cardSubtitle () { "Subtitle" }
}
Ion.cardContent () {
"Card content goes here"
}
}
// List with items
Ion.list () {
Solid.For(each = todos) { fun todo _ ->
Ion.item () {
Ion.label () { todo.text }
Ion.checkbox (``checked`` = todo.done) {}
}
}
}
🏗️ Project Structure TakinProfit.Solid/
├── src/
│ ├── TakinProfit.Solid/ # Core Solid.js bindings
│ │ ├── Builder.fs # Computation expression builder
│ │ ├── Solid.fs # Reactive primitives
│ │ └── TakinProfit.Solid.fsproj
│ └── TakinProfit.Solid.Ionic/ # Ionic component bindings
│ ├── Types.fs # Enums and types
│ ├── Core.fs # Initialization
│ ├── Ionicons.g.fs # 1,357 icon constants
│ ├── Ion.g.fs # 95 generated components
│ └── TakinProfit.Solid.Ionic.fsproj
├── tests/ # 640+ unit tests
├── example/ # Example application
├── Taskfile.yml # Build automation
├── Directory.Build.props # Shared MSBuild config
└── TakinProfit.Solid.slnx # Solution file
🛠️ Development
Prerequisites
Building # Using Task (recommended)
task build
# Using dotnet directly
dotnet build TakinProfit.Solid.slnx
Running Tests task test
# Or manually
cd tests
dotnet fable . -o fable_output -e .jsx --lang jsx
bun test --preload ./setup.ts fable_output
Running Example task example
# Or manually
cd example
dotnet fable . -o fable_output -e .jsx --lang jsx
bunx vite --host
Available Tasks Run task --list to see all available commands:
task build # Build all projects
task test # Run all tests
task pack # Create NuGet packages
task publish # Publish to NuGet
task generate # Run code generators
task example # Run example app
task clean # Clean all outputs
task info # Show project information
📦 Publishing
Create Packages task pack
# Creates packages in ./nupkgs/
Publish to NuGet export NUGET_API_KEY=your-api-key
task publish
Publish to Local Feed task publish:local
🎯 Design Decisions
Computation Expression Pattern All components use a consistent CE pattern:
Ion.component (prop = value) {
// children here
}
✅ Type-safe prop passing
✅ Fluent, declarative syntax
✅ Excellent IntelliSense support
✅ Familiar F# idioms
Accessor Functions for Reactivity Solid.js control flow components require accessor functions (not values):
// ✅ Correct - pass accessor
Solid.Show(``when`` = isVisible) { ... }
// ❌ Wrong - don't call it
Solid.Show(``when`` = isVisible()) { ... }
This ensures SolidJS can track reactive dependencies properly.
netstandard2.1 Target All packages target netstandard2.1 for maximum compatibility:
Works with .NET 8, 9, 10+
Compatible with .NET Framework 4.7.2+
Future-proof for upcoming .NET versions
🤝 Contributing Contributions welcome! Please:
Fork the repository
Create a feature branch
Make your changes
Run task check to verify builds and tests
Submit a pull request
📄 License MIT License - see LICENSE for details
🙏 Acknowledgments
📞 Support
Built with ❤️ using F# and Solid.js
