Duotone support.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "elm-fontawesome-generator",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Generate elm modules for FontAwesome icons.",
   "main": "src/elm-fontawesome.js",
   "author": "Gareth Latty <[email protected]>",
@@ -43,6 +43,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.10.1",
     "@fortawesome/free-regular-svg-icons": "^5.10.1",
     "@fortawesome/free-solid-svg-icons": "^5.10.1",
+    "@fortawesome/pro-duotone-svg-icons": "^5.10.1",
     "@fortawesome/pro-light-svg-icons": "^5.10.1",
     "@fortawesome/pro-regular-svg-icons": "^5.10.1",
     "@fortawesome/pro-solid-svg-icons": "^5.10.1"

resources/deploy.sh

@@ -16,7 +16,7 @@ cd elm-fontawesome-example
 pkg="elm.json"
 tmp=$(mktemp)
 npx jq "del(.dependencies.direct.\"lattyware/elm-fontawesome\")" "${pkg}" > "${tmp}" && mv "${tmp}" "${pkg}"
-elm install lattyware/elm-fontawesome
+echo "Y" | elm install lattyware/elm-fontawesome
 git add -A
 git commit -m "Update to use elm-fontawesome ${TRAVIS_TAG}"
 git push --quiet

src/elm/FontAwesome/Icon.elm

@@ -53,7 +53,7 @@ type alias Icon =
     , name : String
     , width : Int
     , height : Int
-    , path : String
+    , paths : List String
     }
 
 
@@ -285,24 +285,40 @@ viewWithTransform transforms icon =
         Just ts ->
             Svg.g [ ts.outer ]
                 [ Svg.g [ ts.inner ]
-                    [ corePath [ ts.path ] icon
+                    [ corePaths [ ts.path ] icon
                     ]
                 ]
 
         Nothing ->
-            corePath [] icon
+            corePaths [] icon
 
 
-corePath : List (Svg.Attribute msg) -> Icon -> Svg msg
-corePath attrs icon =
-    Svg.path (SvgA.fill "currentColor" :: SvgA.d icon.path :: attrs) []
+corePaths : List (Svg.Attribute msg) -> Icon -> Svg msg
+corePaths attrs icon =
+    case icon.paths of
+        [] ->
+            corePath attrs ""
+
+        only :: [] ->
+            corePath attrs only
+
+        secondary :: primary :: _ ->
+            Svg.g [ SvgA.class "fa-group" ]
+                [ corePath (SvgA.class "fa-secondary" :: attrs) secondary
+                , corePath (SvgA.class "fa-primary" :: attrs) primary
+                ]
+
+
+corePath : List (Svg.Attribute msg) -> String -> Svg msg
+corePath attrs d =
+    Svg.path (SvgA.fill "currentColor" :: SvgA.d d :: attrs) []
 
 
 viewMaskedWithTransform : String -> SvgTransformStyles msg -> Icon -> Icon -> List (Svg msg)
 viewMaskedWithTransform id transforms inner outer =
     let
         maskInnerGroup =
-            Svg.g [ transforms.inner ] [ Svg.path [ transforms.path, SvgA.fill "black", SvgA.d inner.path ] [] ]
+            Svg.g [ transforms.inner ] [ corePaths [ SvgA.fill "black", transforms.path ] inner ]
 
         maskId =
             "mask-" ++ inner.name ++ "-" ++ id
@@ -316,7 +332,7 @@ viewMaskedWithTransform id transforms inner outer =
                 [ Svg.rect (SvgA.fill "white" :: allSpace) [], Svg.g [ transforms.outer ] [ maskInnerGroup ] ]
 
         defs =
-            Svg.defs [] [ Svg.clipPath [ SvgA.id clipId ] [ corePath [] outer ], maskTag ]
+            Svg.defs [] [ Svg.clipPath [ SvgA.id clipId ] [ corePaths [] outer ], maskTag ]
     in
     [ defs
     , Svg.rect

src/js/elm-fontawesome.js

@@ -12,7 +12,7 @@ import { styles } from "./template/styles";
 import * as elm from "./template/elm";
 import { icons } from "./template/icons";
 
-const version = "3.1.0";
+const version = "4.0.0";
 
 const exec = promisify(exec_internal);
 
@@ -42,35 +42,41 @@ const templateModule = (name, template) =>
     await exec(`elm-format src/${fileName} --yes`, { cwd: dist });
   });
 
-function styleSuffix(prefix) {
+const styleSuffix = prefix => `?style=${styleSuffixName(prefix)}`;
+
+function styleSuffixName(prefix) {
   switch (prefix) {
     case "fas":
-      return "?style=solid";
+      return "solid";
     case "far":
-      return "?style=regular";
+      return "regular";
     case "fal":
-      return "?style=light";
+      return "light";
     case "fab":
-      return "?style=brands";
+      return "brands";
+    case "fad":
+      return "duotone";
     default:
       throw new Error(`Unknown FontAwesome pack: "${prefix}".`);
   }
 }
 
 function iconDefinition(iconDef) {
-  const [width, height, _ligatures, _unicode, d] = iconDef.icon;
+  const [width, height, _ligatures, _unicode, dOrPaths] = iconDef.icon;
   const name = iconDef.iconName;
   const prefix = iconDef.prefix;
   const link = `${name}${styleSuffix(prefix)}`;
 
+  const paths = typeof dOrPaths === "string" ? [dOrPaths] : dOrPaths;
+
   return {
     name,
     id: elm.identifier(name),
     link,
     prefix,
     width,
     height,
-    d
+    paths
   };
 }
 

src/js/pro.js

@@ -23,6 +23,11 @@ build([
     name: "Brands",
     pkg: "@fortawesome/free-brands-svg-icons",
     pack: "fab"
+  },
+  {
+    name: "Duotone",
+    pkg: "@fortawesome/pro-duotone-svg-icons",
+    pack: "fad"
   }
 ])
   .then(() => console.log("Successful build."))

src/js/template/attributes.js

@@ -54,19 +54,29 @@ const categories = [
     title: "Stacked Icons",
     link: "stacking-icons",
     functions: ["stack", "stack-1x", "stack-2x", "inverse"]
+  },
+  {
+    title: "Duotone Icons",
+    link: "duotone-icons",
+    functions: ["swap-opacity"]
   }
 ];
 
 const sections = categories.map(section => ({
   title: section.title,
   link: section.link,
-  functions: section.functions.map(f => ({id: elm.identifier(f), name: "fa-" + f}))
+  functions: section.functions.map(f => ({
+    id: elm.identifier(f),
+    name: "fa-" + f
+  }))
 }));
 
-const functions = sections
-  .flatMap(section => section.functions);
+const functions = sections.flatMap(section => section.functions);
 
-export const attributes = (path) => elm.module(path, `
+export const attributes = path =>
+  elm.module(
+    path,
+    `
 {-| Styling attributes for icons.
 
 ${sections.map(docSection).join("")}
@@ -76,19 +86,22 @@ import Svg
 import Svg.Attributes as SvgA
 
 ${functions.map(attribute).join("")}
-`);
+`
+  );
 
-const docSection = (section) => (`
+const docSection = section => `
 # ${section.title}
 
-[See the FontAwesome docs for details.](https://fontawesome.com/how-to-use/on-the-web/styling/${section.link})
+[See the FontAwesome docs for details.](https://fontawesome.com/how-to-use/on-the-web/styling/${
+  section.link
+})
 
 @docs ${section.functions.map(f => f.id).join(", ")}
-`);
+`;
 
-const attribute = (attribute) => (`
+const attribute = attribute => `
 {-| Apply the ${attribute.name} class to the element. 
 -}
 ${attribute.id} : Svg.Attribute msg
 ${attribute.id} = SvgA.class "${attribute.name}"
-`);
+`;

src/js/template/icons.js

@@ -21,5 +21,12 @@ const iconDefinition = icon => `
 -}
 ${icon.id} : Icon
 ${icon.id} = 
-  Icon "${icon.prefix}" "${icon.name}" ${icon.width} ${icon.height} "${icon.d}"
+  Icon 
+    "${icon.prefix}" 
+    "${icon.name}" 
+    ${icon.width} 
+    ${icon.height} 
+    [${icon.paths.map(path).join(", ")}]
 `;
+
+const path = d => `"${d}"`;