Merge pull request #515 from NoRedInk/hack-day/tessa/format-svgs

Adds rich text formatting icons

src/Nri/Ui/UiIcon/V1.elm

@@ -16,6 +16,7 @@ module Nri.Ui.UiIcon.V1 exposing
     , equals, plus
     , key, lock, premiumLock
     , badge
+    , bold, italic, underline, list, undo
     )
 
 {-| How to add new icons: <https://paper.dropbox.com/doc/How-to-create-a-new-SVG-icon-for-use-in-Elm--Ay9uhSLfGUAix0ERIiJ0Dm8dAg-8WNqtARdr4EgjmYEHPeYD>
@@ -37,6 +38,7 @@ module Nri.Ui.UiIcon.V1 exposing
 @docs equals, plus
 @docs key, lock, premiumLock
 @docs badge
+@docs bold, italic, underline, list, undo
 
     import Html.Styled exposing (..)
     import Nri.Ui.Colors.V1 as Colors
@@ -1129,3 +1131,71 @@ tree =
         , Svg.path [ Attributes.d "M76.4106974,96.9530825 C76.4106974,98.5901989 75.1246092,99.8762872 73.4874928,99.8762872 L50.1018553,99.8762872 L50.1018553,94.0298778 L73.4874928,94.0298778 C75.1246092,94.0298778 76.4106974,95.3159659 76.4106974,96.9530825 L76.4106974,96.9530825 Z", Attributes.fill "#9CDD05" ] []
         ]
         |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+bold : Nri.Ui.Svg.V1.Svg
+bold =
+    Svg.svg
+        [ Attributes.width "100%"
+        , Attributes.height "100%"
+        , Attributes.fill "currentcolor"
+        , Attributes.viewBox "0 0 13.6 13.9"
+        ]
+        [ Svg.path [ Attributes.d "M12.2,7.5c0.4,0.3,0.8,0.6,1,1.1s0.4,0.9,0.4,1.5c0,0.7-0.1,1.3-0.4,1.8s-0.7,0.9-1.3,1.1c-0.6,0.3-1.3,0.5-2,0.6 s-1.7,0.2-2.7,0.2H0v-0.8c0.2,0,0.5,0,0.8-0.1s0.5-0.1,0.6-0.1c0.2-0.1,0.4-0.2,0.5-0.4S2,12.1,2,11.9V2.1c0-0.2,0-0.4-0.1-0.6 S1.7,1.2,1.4,1.1C1.2,1,1,0.9,0.7,0.9S0.2,0.8,0,0.8V0h7.5c1.9,0,3.3,0.3,4.1,0.8s1.3,1.3,1.3,2.3c0,0.5-0.1,0.9-0.3,1.2 S12.1,5,11.8,5.2c-0.3,0.2-0.7,0.4-1.1,0.6S9.7,6.2,9.2,6.3v0.2c0.5,0.1,1,0.2,1.6,0.3C11.4,7,11.8,7.2,12.2,7.5z M9.1,3.3 c0-0.8-0.2-1.4-0.6-1.8S7.4,0.9,6.5,0.9c-0.1,0-0.3,0-0.5,0s-0.4,0-0.5,0v5.1H6c1.1,0,1.8-0.2,2.3-0.7S9.1,4.2,9.1,3.3z M9.8,10 c0-1-0.3-1.7-0.9-2.2C8.3,7.2,7.5,7,6.4,7C6.3,7,6.2,7,6,7S5.6,7,5.5,7v5.1c0.1,0.2,0.2,0.4,0.5,0.6C6.4,12.9,6.7,13,7.2,13 c0.8,0,1.4-0.3,1.9-0.8C9.5,11.7,9.8,10.9,9.8,10z" ] []
+        ]
+        |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+italic : Nri.Ui.Svg.V1.Svg
+italic =
+    Svg.svg
+        [ Attributes.width "100%"
+        , Attributes.height "100%"
+        , Attributes.fill "currentcolor"
+        , Attributes.viewBox "0 0 9.5 13.9"
+        ]
+        [ Svg.path [ Attributes.d "M9.5,0L9.3,0.6c-0.2,0-0.5,0-0.8,0.1C8.2,0.8,7.9,0.8,7.8,0.9C7.5,1,7.3,1.1,7.2,1.3S7,1.6,7,1.8L4.6,12c0,0,0,0.1,0,0.2\n    c0,0.1,0,0.1,0,0.2c0,0.2,0,0.3,0.1,0.4c0.1,0.1,0.2,0.2,0.4,0.3c0.1,0,0.3,0.1,0.6,0.2s0.6,0.1,0.7,0.1l-0.1,0.6H0l0.1-0.6\n    c0.2,0,0.4,0,0.8-0.1s0.6-0.1,0.7-0.1c0.3-0.1,0.4-0.2,0.6-0.4s0.2-0.4,0.3-0.6L4.8,1.9c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2\n    c0-0.1,0-0.2-0.1-0.3C4.7,1.2,4.6,1.1,4.4,1C4.3,0.9,4,0.8,3.7,0.8S3.2,0.7,3.1,0.6L3.2,0H9.5z" ] [] ]
+        |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+underline : Nri.Ui.Svg.V1.Svg
+underline =
+    Svg.svg
+        [ Attributes.width "100%"
+        , Attributes.height "100%"
+        , Attributes.fill "currentcolor"
+        , Attributes.viewBox "0 0 17 19"
+        ]
+        [ Svg.rect [ Attributes.x "2", Attributes.y "17", Attributes.width "14.3", Attributes.height "1.4" ] []
+        , Svg.path [ Attributes.d "M16.3,0.754320988 C16.1130306,0.773662648 15.8438632,0.817180731 15.4924897,0.884876543 C15.1411162,0.952572355 14.8461603,1.07023236 14.6076132,1.23786008 C14.3626188,1.39904059 14.1901583,1.68916114 14.0902263,2.10823045 C13.9902944,2.52729976 13.9403292,3.1558943 13.9403292,3.99403292 L13.9403292,9.10020576 C13.9403292,10.6024081 13.4310065,11.8112437 12.4123457,12.726749 C11.3936849,13.6422542 10.0462361,14.1 8.36995885,14.1 C6.41645114,14.1 4.90460069,13.658372 3.83436214,12.7751029 C2.76412359,11.8918337 2.22901235,10.6604331 2.22901235,9.0808642 L2.22901235,2.05987654 C2.22901235,1.83422384 2.18549426,1.64081013 2.09845679,1.47962963 C2.01141932,1.31844913 1.84540589,1.17338885 1.60041152,1.04444444 C1.4327838,0.960630582 1.22647585,0.892935786 0.981481481,0.841358025 C0.736487115,0.789780263 0.536626288,0.754321084 0.381893004,0.734979424 L0.381893004,0 L7.57695473,0 L7.57695473,0.734979424 C7.37064369,0.747873864 7.16111217,0.772050577 6.94835391,0.807510288 C6.73559564,0.842969999 6.51961701,0.896158767 6.30041152,0.967078189 C6.05541716,1.04444483 5.89101551,1.1733873 5.80720165,1.35390947 C5.72338778,1.53443163 5.68148148,1.73751602 5.68148148,1.96316872 L5.68148148,8.88744856 C5.68148148,10.247812 5.98127272,11.2374455 6.5808642,11.8563786 C7.18045567,12.4753117 8.05081734,12.7847737 9.19197531,12.7847737 C10.3137916,12.7847737 11.193824,12.4430761 11.8320988,11.7596708 C12.4703736,11.0762654 12.7895062,10.0705142 12.7895062,8.74238683 L12.7895062,4.09074074 C12.7895062,3.26549656 12.7330938,2.64818449 12.6202675,2.23878601 C12.5074411,1.82938753 12.3349806,1.53443163 12.1028807,1.35390947 C11.9352529,1.21207062 11.6435206,1.08312815 11.2276749,0.967078189 C10.8118292,0.851028226 10.5200969,0.780109868 10.3524691,0.754320988 L10.3524691,0 L16.3,0 L16.3,0.754320988 Z" ] []
+        ]
+        |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+list : Nri.Ui.Svg.V1.Svg
+list =
+    Svg.svg
+        [ Attributes.width "100%"
+        , Attributes.height "100%"
+        , Attributes.fill "currentcolor"
+        , Attributes.viewBox "0 0 16 12.6"
+        ]
+        [ Svg.path [ Attributes.d "M1.7,3.4C0.8,3.4,0,2.7,0,1.7S0.8,0,1.7,0s1.7,0.8,1.7,1.7S2.7,3.4,1.7,3.4z M1.7,8C0.8,8,0,7.2,0,6.3s0.8-1.7,1.7-1.7\n    s1.7,0.8,1.7,1.7S2.7,8,1.7,8z M1.7,12.6c-0.9,0-1.7-0.8-1.7-1.7s0.8-1.7,1.7-1.7s1.7,0.8,1.7,1.7S2.7,12.6,1.7,12.6z M16,2.6\n    c0,0.2-0.1,0.3-0.3,0.3H4.9c-0.2,0-0.3-0.1-0.3-0.3V0.9c0-0.2,0.1-0.3,0.3-0.3h10.9c0.2,0,0.3,0.1,0.3,0.3V2.6z M16,7.1\n    c0,0.2-0.1,0.3-0.3,0.3H4.9c-0.2,0-0.3-0.1-0.3-0.3V5.4c0-0.2,0.1-0.3,0.3-0.3h10.9c0.2,0,0.3,0.1,0.3,0.3V7.1z M16,11.7\n    c0,0.2-0.1,0.3-0.3,0.3H4.9c-0.2,0-0.3-0.1-0.3-0.3V10c0-0.2,0.1-0.3,0.3-0.3h10.9c0.2,0,0.3,0.1,0.3,0.3V11.7z" ] [] ]
+        |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+undo : Nri.Ui.Svg.V1.Svg
+undo =
+    Svg.svg
+        [ Attributes.width "100%"
+        , Attributes.height "100%"
+        , Attributes.fill "currentcolor"
+        , Attributes.viewBox "0 0 18 8"
+        ]
+        [ Svg.path [ Attributes.d "M3.16 3.168C4.83 1.76 6.938.879 9.22.879c4.126 0 7.55 2.64 8.78 6.336l-2.107.705c-.879-2.816-3.513-4.84-6.674-4.84a6.877 6.877 0 0 0-4.478 1.672L7.902 7.92H0V0l3.16 3.168z" ] [] ]
+        |> Nri.Ui.Svg.V1.fromHtml

styleguide-app/Examples/UiIcon.elm

@@ -112,5 +112,12 @@ example =
                 , ( "sapling", UiIcon.sapling )
                 , ( "tree", UiIcon.tree )
                 ]
+            , IconExamples.view "Rich Text Formatting"
+                [ ( "bold", UiIcon.bold )
+                , ( "italic", UiIcon.italic )
+                , ( "underline", UiIcon.underline )
+                , ( "list", UiIcon.list )
+                , ( "undo", UiIcon.undo )
+                ]
             ]
     }