Create a singular file for each icon

[krainboltgreene]

I've noticed there's an "all" CSS file called icons.css, and each icon has a before and after and a "main" CSS, but no individual icon file with all the css for that icon?

[wentin]

it is separated in scss for each main and pseudo element to make the inspector work. it is put together with scss import in the main icon.scss file. Why do you need them in single files? You can click and "try it on codepen" there you have the css that is only for one icon. Does that address the problem?

[krainboltgreene]

Well if you start sharing the icons as asked in #5 it would be nice to import individual icons into a project:

require("node_modules/css-icons/css/print.css")

[wentin]

I see! right now I do @import 'icons/search/*'; in scss, would that work in your case? it just needs globbling

[krainboltgreene]

Not quite, since I actually use gulp for css compiling. See here:

gulp.task("styles", () => {
  return gulp.src([
  "./node_modules/font-awesome/css/font-awesome.css",
  "./node_modules/normalize.css/normalize.css",
  "./source/client/index.css"
])
    .pipe(gulpConcat("./transpiled/index.css"))
    .pipe(gulpMyth())
    .pipe(gulpSize({showFiles: true}))
    .pipe(gulp.dest(DESINATION))
    .pipe(gulpGzip({append: true}))
    .pipe(gulpSize({showFiles: true}))
    .pipe(gulp.dest(DESINATION))
})

gulp.task("watch", ["styles"], () => {
  gulp.watch(STYLES, ["styles"])
})

gulp.task("build", ["styles"])

[wentin]

after all icon get finalized, i can create those single css with some auto task runner :)