search
Assets
⚠️ Support: Manganis is currently in alpha. API changes are planned and bugs are more likely
Assets are files that are included in the final build of the application. They can be images, fonts, stylesheets, or any other file that is not a source file. Dioxus includes first class support for assets, and provides a simple way to include them in your application and automatically optimize them for production.
Assets in dioxus are also compatible with libraries! If you are building a library, you can include assets in your library and they will be automatically included in the final build of any application that uses your library.
First, you need to add the  manganis crate to your  Cargo.toml file:
cargo add manganis



Including images
To include an asset in your application, you can simply wrap the path to the asset in a  mg! call. For example, to include an image in your application, you can use the following code:
use dioxus::prelude::*;
use manganis::*;

fn App() -> Element {
    // You can link to assets that are relative to the package root or even link to an asset from a url
    // These assets will automatically be picked up by the dioxus cli, optimized, and bundled with your final applications
    const ASSET: manganis::ImageAsset = manganis::mg!(image("./public/static/ferrous_wave.png"));
    rsx! { img { src: "{ASSET}" } }
}



You can also optimize, resize, and preload images using the  mg! macro. Choosing an optimized file type (like WebP) and a reasonable quality setting can significantly reduce the size of your images which helps your application load faster. For example, you can use the following code to include an optimized image in your application:
pub const ENUM_ROUTER_IMG: manganis::ImageAsset =
    manganis::mg!(image("./public/static/enum_router.png")
        // Manganis uses the builder pattern inside the macro. You can set the image size in pixels at compile time to send the smallest possible image to the client
        .size(52, 52)
        // You can also convert the image to a web friendly format at compile time. This can make your images significantly smaller
        .format(ImageType::Avif)
        // You can even tell manganis to preload the image so it's ready to be displayed as soon as it's needed
        .preload());

fn EnumRouter() -> Element {
    rsx! { img { src: "{ENUM_ROUTER_IMG}" } }
}



Including arbitrary files
In dioxus desktop, you may want to include a file with data for your application. You can use the  file function to include arbitrary files in your application. For example, you can use the following code to include a file in your application:
// You can also collect arbitrary files. Relative paths are resolved relative to the package root
const PATH_TO_BUNDLED_CARGO_TOML: &str = manganis::mg!(file("./Cargo.toml"));
// You can use URLs to copy the asset at build time
const PATH_TO_BUNDLED_AWESOME_DIOXUS: &str = manganis::mg!(file("https://dioxuslabs.com/awesome"));



These files will be automatically included in the final build of your application, and you can use them in your application as you would any other file.
Including stylesheets
You can include stylesheets in your application using the  mg! macro. For example, you can use the following code to include a stylesheet in your application:
// You can also bundle stylesheets with your application
// Any files that end with .css will be minified and bundled with your application even if you don't explicitly include them in your <head>
const _: &str = manganis::mg!(file("./tailwind.css"));



The tailwind guide has more information on how to use tailwind with dioxus.
Conclusion
Dioxus provides first class support for assets, and makes it easy to include them in your application. You can include images, arbitrary files, and stylesheets in your application, and dioxus will automatically optimize them for production. This makes it easy to include assets in your application and ensure that they are optimized for production.
You can read more about assets and all the options available to optimize your assets in the manganis documentation.