Octicons svg

examples/document/basic-example.adoc

@@ -65,11 +65,11 @@ icon:flag[rotate=270] +
 icon:flag[flip=horizontal] +
 icon:flag[flip=vertical]
 
-.Roles
-icon:heart[role=is-primary] icon:heart[role=is-success] icon:heart[role=is-warning] icon:heart[role=is-danger]
+.Octicons
+You can icon:repo-forked[set=octicons] me on icon:mark-github[set=octicons]... bip bip bop icon:hubot@octicons[]
 
-.Set
-icon:address-book[set=far] icon:address-book[] icon:chrome@fab[]
+.FontAwesome solid (default), regular and brand
+icon:address-book[] icon:address-book[set=far] icon:chrome@fab[]
 
 == Conclusion
 

lib/document/templates.js

@@ -2,6 +2,7 @@ const fs = require('fs')
 const path = require('path')
 const stemContent = require('./stem')
 
+const octicons = require('@primer/octicons')
 const faLibrary = require('@fortawesome/fontawesome-svg-core').library
 const faIcon = require('@fortawesome/fontawesome-svg-core').icon
 const faDom = require('@fortawesome/fontawesome-svg-core').dom
@@ -185,30 +186,6 @@ ${syntaxHighlighterFooter(node, syntaxHighlighter, { cdn_base_url: cdnBaseUrl, l
   },
   inline_image: (node, baseConverter) => {
     if (node.getType() === 'icon' && isSvgIconEnabled(node)) {
-      const transform = {}
-      if (node.hasAttribute('rotate')) {
-        transform.rotate = node.getAttribute('rotate')
-      }
-      if (node.hasAttribute('flip')) {
-        const flip = node.getAttribute('flip')
-        if (flip === 'vertical' || flip === 'y' || flip === 'v') {
-          transform.flipY = true
-        } else {
-          transform.flipX = true
-        }
-      }
-      const options = {}
-      options.transform = transform
-      if (node.hasAttribute('title')) {
-        options.title = node.getAttribute('title')
-      }
-      options.classes = []
-      if (node.hasAttribute('size')) {
-        options.classes.push(`fa-${node.getAttribute('size')}`)
-      }
-      if (node.getRoles() && node.getRoles().length > 0) {
-        options.classes = options.classes.concat(node.getRoles().map(value => value.trim()))
-      }
       const meta = {}
       const target = node.getTarget()
       let iconName = target
@@ -220,9 +197,41 @@ ${syntaxHighlighterFooter(node, syntaxHighlighter, { cdn_base_url: cdnBaseUrl, l
         meta.prefix = parts[1]
       }
       meta.iconName = iconName
-      const icon = faIcon(meta, options)
-      if (icon) {
-        return icon.html
+      if (meta.prefix === 'octicons') {
+        const icon = octicons[meta.iconName]
+        if (icon) {
+          return icon.toSVG()
+        }
+      } else {
+        // FontAwesome
+        const transform = {}
+        if (node.hasAttribute('rotate')) {
+          transform.rotate = node.getAttribute('rotate')
+        }
+        if (node.hasAttribute('flip')) {
+          const flip = node.getAttribute('flip')
+          if (flip === 'vertical' || flip === 'y' || flip === 'v') {
+            transform.flipY = true
+          } else {
+            transform.flipX = true
+          }
+        }
+        const options = {}
+        options.transform = transform
+        if (node.hasAttribute('title')) {
+          options.title = node.getAttribute('title')
+        }
+        options.classes = []
+        if (node.hasAttribute('size')) {
+          options.classes.push(`fa-${node.getAttribute('size')}`)
+        }
+        if (node.getRoles() && node.getRoles().length > 0) {
+          options.classes = options.classes.concat(node.getRoles().map(value => value.trim()))
+        }
+        const icon = faIcon(meta, options)
+        if (icon) {
+          return icon.html
+        }
       }
     } else {
       return baseConverter.$convert_inline_image(node)

package.json

@@ -36,6 +36,7 @@
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
     "@fortawesome/free-solid-svg-icons": "5.11.2",
+    "@primer/octicons": "^9.1.1",
     "chokidar": "2.0.4",
     "fs-extra": "7.0.1",
     "pagedjs": "0.1.34",

test/templates_test.js

@@ -113,5 +113,12 @@ icon:chrome@fab[]`)
       const $ = cheerio.load(doc.convert())
       expect($('svg[data-prefix=\'fab\'][data-icon=\'chrome\']').html()).to.equal('<path fill="currentColor" d="M131.5 217.5L55.1 100.1c47.6-59.2 119-91.8 192-92.1 42.3-.3 85.5 10.5 124.8 33.2 43.4 25.2 76.4 61.4 97.4 103L264 133.4c-58.1-3.4-113.4 29.3-132.5 84.1zm32.9 38.5c0 46.2 37.4 83.6 83.6 83.6s83.6-37.4 83.6-83.6-37.4-83.6-83.6-83.6-83.6 37.3-83.6 83.6zm314.9-89.2L339.6 174c37.9 44.3 38.5 108.2 6.6 157.2L234.1 503.6c46.5 2.5 94.4-7.7 137.8-32.9 107.4-62 150.9-192 107.4-303.9zM133.7 303.6L40.4 120.1C14.9 159.1 0 205.9 0 256c0 124 90.8 226.7 209.5 244.9l63.7-124.8c-57.6 10.8-113.2-20.8-139.5-72.5z"></path>')
     })
+    it('should render an Octicons SVG icon', () => {
+      const doc = asciidoctor.load(`:icontype: svg
+
+icon:hubot@octicons[]`)
+      const $ = cheerio.load(doc.convert())
+      expect($('svg.octicon.octicon-hubot').html()).to.equal('<path fill-rule="evenodd" d="M3 6c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H3zm8 1.75L9.75 9h-1.5L7 7.75 5.75 9h-1.5L3 7.75V7h.75L5 8.25 6.25 7h1.5L9 8.25 10.25 7H11v.75zM5 11h4v1H5v-1zm2-9C3.14 2 0 4.91 0 8.5V13c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V8.5C14 4.91 10.86 2 7 2zm6 11H1V8.5c0-3.09 2.64-5.59 6-5.59s6 2.5 6 5.59V13z"></path>')
+    })
   })
 })