Cant use svgs in divs

[blakat360]

I get the following error when trying to use svgs in an html div

The 2nd argument to `div` is not what I expect:

138|>  Html.div [Attr.css [Tw.bg_gray_800, Tw.w_screen, Tw.h_24, Tw.flex]] [
139|>    svg [] [
140|>      line [x1 "0", y1 "0", x2 "1", y2 "1"] []
141|>      ]
142|>    ]

This argument is a list of type:

    List (Html.Html msg)

But `div` needs the 2nd argument to be:

    List (Html.Html msg)

I have the following imports

port module Main exposing (main)
import Browser
import Browser.Navigation as Nav
import Css
import Css.Global
import Html.Styled as Html
import Html.Styled.Attributes as Attr
import Tailwind.Breakpoints as Breakpoints
import Tailwind.Utilities as Tw
import Url
import Json.Decode as Decode exposing (Error, decodeValue, Decoder, int)
import Json.Decode.Pipeline exposing (required)
import Json.Encode exposing (Value)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Icons

[Carsten_Konig]

Hi,

the error message is unlucky but I think the problem is that Html.Styled exports it’s own Html type which is defined just like the one from html but different (you can use toUnstyled and fromUnstyled go between).

Html.Styled exports a variant of the Svg module also so I suggest you change your imports to

import Svg.Styled exposing (..)
import Svg.Attributes exposing (..)

and see if this works.