0.2.1 • Published 3 years ago

@elfin-fe/svg-man v0.2.1

Weekly downloads
3
License
ISC
Repository
github
Last release
3 years ago

install

npm i svg-man --save-dev

usage

files

assets
    |
    svgs
        |
        gulpfile.js
        1.svg
        2.svg
        3.svg
    other-dirs

content of gulpfile.js

// gulpfile.js
const gulp = require('svg-man')
gulp.config({
    fontName: 'ft-icon',
    prefix: 'ft'
})

config

  • fontName: String
  • prefix: String
  • startUnicode: HEX Integer

step 1

  • right click gulpfile.js
  • click Show Gulp Tasks

npm.io

step 2

npm.io

run gen-iconfont

you will get some font files

assets
    |
    svgs
        |
        iconfont
            |
            fonts
                |
                xxx.wtff
                xxx.ttf
            iconfont.css
            iconfont-example.html
        gulpfile.js
        1.svg
        2.svg
        3.svg
    other-dirs

just import the iconfont.css in your main.js(VUE)

import './assets/iconfont/iconfont.css'

write this everywhere <i class='prefix-xxx'></i>.

Well done!

or

run gen-symbol

you will get one JS file

assets
    |
    svgs
        |
        iconfont
            |
            iconfont.js
            symbol-example.html
        gulpfile.js
        1.svg
        2.svg
        3.svg
    other-dirs

just import the iconfont.js in your main.js(VUE)

import './assets/iconfont/iconfont.js'

write this everywhere

<svg role="img" class="icon-symbol">
    <use xlink:href="#svg-id"></use>
</svg>

Well Done!