Gulp SVG Icons to output an HTML file for partial view
Question
So I am using GULP to build a SPA Styleguide for a large company. I have all of the SVG Icons being generated into a font in my gulp file. What I wanted to build was an HTML file I can use as a partial view (angular) so whenever someone tosses in a new SVG, it runs and generates a new HTML file every time, thus keeping the styleguide referencing this partial view up to date. I cannot get too complex because this will be handed off to a group of very Jr. developers. Here is what I have so far. When I run the gulp task, it is only building the first icon out of the 4 or 5 I have in there currently.
Gulp File (icon html file portion only):
gulp.task('fonts:build', function () {
var re = new RegExp(/icon-(\w+)/);
fs.readFile('www/Css/app.min.css', 'utf8', function(err, data) {
var icons = []
if(err)
return console.log(err);
data.split('\r\n').forEach(function(icon) {
var match = re.exec(icon);
if(match)
icons.push('icon-' + match[1])
})
// the gulp-jade plugin expects template local data to be an object
// such as:
// {locals: YOUR_DATA_OBJECT_TO_BIND}
bind({locals: {icons: icons}})
});
// method that will bind data to your template
var bind = function(data) {
gulp.src('Assets/Styles/Sass/CompanyNameFont/IconTemplate.jade')
.pipe(jade(data))
.pipe(gulp.dest('App/partials/icons/.'))
}
});
Jade template for the output html file:
doctype html
html(lang="en")
head
body
for ic in icons
i(class=ic)
|.
= ic
Final HTML output from the Jade:
<!DOCTYPE html><html lang="en"><head></head><body><i class="icon-dependable">.icon-dependable</i></body></html>
As you can see I only have 1 icon listed but my min.css and my scss font files show 4 icons total.
Thanks for the help
1 answers
solution1
0 2017-04-03 18:28:49
Solved this by just using gulp-iconfont-template.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.