tb-icons - npm Package Compare versions

Comparing version 0.0.6 to 0.0.8

gulpfile.js

@@ -0,2 +1,4 @@
+var path       = require('path')
 var gulp       = require('gulp')
+var wait       = require('gulp-wait')
 var jade       = require('gulp-jade')
@@ -8,5 +10,8 @@ var stylus     = require('gulp-stylus')
 var ghPages    = require('gulp-gh-pages')
-
 var camel2Dash = require('camel-2-dash')
+var svgSymbols = require('gulp-svg-symbols')
 
+var svgo       = require('./src/tools/gulp-svgo')
+var SVGOConfig = require('./svgo.config.json')
+
 var icons      = require('./src/icons')
@@ -36,5 +41,19 @@ var generators = require('./src/generators')
   }
-  return gulp.src('./src/generators')
+  return gulp.src('').pipe(wait(1000))
 })
 
+gulp.task('svg-optimize', function () {
+  return gulp.src('dist/svgs/*.svg')
+    .pipe(svgo(SVGOConfig))
+    .pipe(gulp.dest('dist/svgs'))
+})
+
+gulp.task('svg-sprites', function () {
+  return gulp.src('dist/svgs/*.svg')
+    .pipe(svgSymbols({
+      "templates":  ['default-svg', path.join(__dirname, 'src/docs/svg-symbols/index.html')]
+    }))
+    .pipe(gulp.dest('dist/'))
+})
+
 gulp.task('styl-to-css', function () {
@@ -66,2 +85,13 @@ return gulp.src('dist/*.styl')
 
+gulp.task('docs-svg-symbols', function () {
+   gulp.src(['dist/svg-symbols.svg'])
+    .pipe(gulp.dest('_gh_pages/svg-symbols/'))
+   gulp.src(['dist/index.html'])
+    .pipe(rimraf({
+      force: true
+    }))
+    .pipe(gulp.dest('_gh_pages/svg-symbols/'))
+    .pipe(connect.reload())
+})
+
 gulp.task('docs-style', function () {
@@ -90,3 +120,3 @@ gulp.src('src/docs/*.styl')
   gulp.src('dist/*.css')
-    .pipe(gulp.dest('_gh_pages/icons'))
+    .pipe(gulp.dest('_gh_pages/icons/'))
 })
@@ -96,3 +126,5 @@
 gulp.task('watch', function () {
-  gulp.watch('src/docs/**/*', ['docs'])
+  gulp.watch('src/docs/**/*', function(){
+    sequence('svg-sprites', 'docs')(function(){})
+  })
 })
@@ -118,2 +150,4 @@
   'generator',
+  'svg-optimize',
+  'svg-sprites',
   'styl-to-css',
@@ -130,3 +164,4 @@ 'move-fonts'
   'docs-fonts',
-  'docs-icons'
+  'docs-icons',
+  'docs-svg-symbols'
   )(callback)
@@ -133,0 +168,0 @@ })

package.json

 {
   "name": "tb-icons",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A classified icons set that consists of a part of Material Design icons and some original icons by TB-UI team.",
@@ -22,3 +22,6 @@ "license": "MIT",
     "gulp-sequence": "^0.3.2",
-    "gulp-stylus": "^2.0.2"
+    "gulp-stylus": "^2.0.2",
+    "gulp-svg-symbols": "^1.0.0",
+    "gulp-svgo": "^1.0.3",
+    "gulp-wait": "0.0.2"
   },
@@ -28,3 +31,6 @@ "dependencies": {
     "capitalize": "^1.0.0",
+    "lodash": "^4.12.0",
+    "mkdirp": "^0.5.1",
     "require-dir": "^0.3.0",
+    "svgfont2svgicons": "^2.0.0",
     "tb-colors": "0.0.2",
@@ -31,0 +37,0 @@ "write": "^0.2.1"

README.md

 ## TB-ICONS: Find & Copy Playing
-A classified icons set that consists of a part of Material Design icons and some original icons by [TB-UI](https://www.github.com/teambition/tb-ui) team. Available in Icon Font and SVG.
+A classified icons set that consists of a part of Material Design icons and some original icons by [TB-UI](https://www.github.com/teambition/tb-ui) team. Available in Icon Fonts and SVG Symbols.
 
@@ -11,8 +11,16 @@ ![TB-Icons Logo](./images/tb-icons-screenshot.png)
 
-### Usage
+### Font Icons Usage
 
+Move the fonts with Gulp:
+```
+gulp.task('move-fonts', function () {
+  gulp.src('node_modules/tb-icons/dist/fonts/**/*')
+    .pipe(gulp.dest('static/fonts/'))
+})
+```
+
 Include the style in Stylus:
 
 ```
-@import 'tb-icons/dist/font-icons'
+@import 'tb-icons'
 ```
@@ -25,23 +33,32 @@
 
-Move the fonts with Gulp:
+Check out [the font icons page](http://teambition.github.io/TB-Icons/font-icons/) to see all font icons.
+
+### SVG Symbols Usage
+Inline combined SVG reference into body, then drop a `<use>` element snippet like this:
+
+``` xml
+<svg role="img" class="ss-t">
+  <use xlink:href="#t"></use>
+</svg>
 ```
-gulp.task('move-fonts', function () {
-  gulp.src('node_modules/tb-icons/dist/fonts/**/*')
-    .pipe(gulp.dest('static/fonts/'))
-})
+
+Or directly link the external `svg-symbols` file:
+``` xml
+<svg role="img" class="ss-t">
+  <use xlink:href="#{svg-path}/svg-symbols.svg#t"></use>
+</svg>
 ```
 
+All SVG symbols available on [the SVG symbols page](http://teambition.github.io/TB-Icons/svg-symbols/).
+
 ### Development
-The source files can be found in [`src`](src) directory.
+The source files can be found in the [`src`](src) directory.
 
 While developing, you should use the command `gulp && gulp serve` to create a watcher and run a docs server with livereload.
 
-Then, to update the icon fonts and the icon name-unicode pairs store, preview immediately on `localhost:8001`.
+Then, to update the icon fonts, SVG font, and the icon name-unicode pairs store, preview immediately on `localhost:8001`.
 
-Lastly, commit your great works, release a new version, use `gulp deploy` to publish docs to GitHub pages.
+Lastly, commit your great works, release a new version, use `gulp deploy` to publish docs to GitHub Pages.
 
-### TODO
-- Create an SVG symbol sprite from icon fonts.
-
 ### License
 This work is licensed under the MIT license.

src/generators/font-icons.js

@@ -1,5 +0,5 @@
-icons     = require('../icons')
-write      = require('write')
-capitalize = require('capitalize')
-camel2Dash = require('camel-2-dash')
+var icons      = require('../icons')
+var write      = require('write')
+var capitalize = require('capitalize')
+var camel2Dash = require('camel-2-dash')
 
@@ -6,0 +6,0 @@ module.exports = function () {

src/icons/date.js

 module.exports = {
   alertClock: 'a01e',
   clock: 'c001',
+  clock2: 'b204',
   repeat: 'b20e',
@@ -5,0 +6,0 @@ leaveState: 'a038',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

888658

increased by26.67%

Number of package files

254

increased by568.42%

Lines of code

1532

increased by9.43%

Number of lines in readme file

63

increased by36.96%

Worsened metrics

Dependency count

8

increased by60%

Dev dependency count

10

increased by42.86%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedlodash@^4.12.0

• + Addedmkdirp@^0.5.1

• + Addedsvgfont2svgicons@^2.0.0

• + Addedcore-util-is@1.0.3(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedisarray@0.0.11.0.0(transitive)

• + Addedisstream@0.1.2(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedplexer@0.0.3(transitive)

• + Addedprocess-nextick-args@2.0.1(transitive)

• + Addedreadable-stream@1.0.341.1.142.3.8(transitive)

• + Addedsafe-buffer@5.1.2(transitive)

• + Addedsax@1.1.6(transitive)

• + Addedstreamqueue@1.1.2(transitive)

• + Addedstring_decoder@0.10.311.1.1(transitive)

• + Addedsvg-pathdata@1.0.0(transitive)

• + Addedsvgfont2svgicons@2.0.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)