Name: helper-octicon
Owner: Helpers
Description: Template helper for displaying octicon SVGs. Should work with any Handlebars, Lo-Dash, underscore or any template engine that allows helper functions to be registered. Also compatible with verb, assemble, and templates.
Created: 2017-01-04 21:01:48.0
Updated: 2017-12-21 18:19:22.0
Pushed: 2017-01-04 21:04:23.0
Homepage: null
Size: 11
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Template helper for displaying octicon SVGs. Should work with any Handlebars, Lo-Dash, underscore or any template engine that allows helper functions to be registered. Also compatible with verb, assemble, and templates.
Install globally with npm
m install --global helper-octicon
The main export is a function that can be called directly:
octicon = require('helper-octicon');
ole.log(octicon('x'));
'<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>'
With Handlebars:
use triple curly braces to unescape the svg tag so it's rendered correctly.
cticon "x" class="close"}}}
<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x close" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
(This example also works for verb, update, generate, or any other lib based on the templates library)
Register the helper for use with any template engine
templates = require('templates');
app = templates();
helper('octicon', require('helper-octicon'));
task('default', function() {
p.src('templates/.hbs')
.pipe(app.dest('dist'));
Helper usage
Delimiters depend on the engine registered. For example, with Lo-Dash or Underscore templates:
octicon("x") %>
<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
Or with Verb, which uses special delimiters to avoid delimiter collision when the documentation itself includes templates that should not render (like these docs):
octicon("x") %}
<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
To use the helper directly with handlebars:
handlebars = require('handlebars');
lebars.registerHelper('octicon', require('helper-octicon'));
Template examples:
cticon "x"}}}
cticon "x" class="close"}}}
cticon "x" width="48" height="60"}}}
Use directly with Lo-Dash or underscore:
octicon = require('helper-octicon');
s a mixin
xin({octicon: octicon});
mplate('<%= _.octicon("x") %>');
'<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>'
r pass the helper on the context
mplate('<%= octicon("x") %>')({octicon: octicon});
'<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>'
To contribute a helper to the github.com/helpers org, follow these steps:
Install generate and [generate-helper][]:
install --global generate generate-helper
To initialize the project, including documentation and unit tests, in the command line, run:
helper
Create a repo on GitHub under your own account.
Create an issue to request a transfer to the helpers org.
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Please read the contributing guide for avice on opening issues, pull requests, and coding standards.
(This document was generated by verb-generate-readme (a verb generator), please don't edit the readme directly. Any changes to the readme must be made in .verb.md.)
To generate the readme and API documentation with verb:
m install -g verb verb-generate-readme && verb
Install dev dependencies:
m install -d && npm test
Brian Woodward
Copyright © 2017, Brian Woodward. Released under the MIT license.
This file was generated by verb-generate-readme, v0.2.3, on January 04, 2017.