Skip to content

Instantly share code, notes, and snippets.

@bbugh

bbugh/_icons.scss

Created September 26, 2018 11:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bbugh/bcc14a4e9266a5e6578c849b39f35dcd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bbugh/bcc14a4e9266a5e6578c849b39f35dcd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bbugh created this gist Sep 26, 2018.
    22 changes: 22 additions & 0 deletions _icons.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    // use with <i class="svg-icon bank-icon"></i>
    .svg-icon {
    vertical-align: middle; // you may not need this line depending on your icons
    }

    // borrowed from icomoon's font output
    .svg-icon::before {
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;

    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    // this is where the magic happens - point this to your svg and all of them will be converted into a font!
    .bank-icon::before {
    font-icon: url('../../icons/bank.svg');
    }
    18 changes: 18 additions & 0 deletions vue.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    // This is for Vue CLI3's webpack config but it should work fine on any Webpack4 postcss-loader config.
    // See the official docs for the basic setup: https://www.npmjs.com/package/iconfont-webpack-plugin#configuration

    const merge = require('deepmerge')
    const IconfontWebpackPlugin = require('iconfont-webpack-plugin');

    module.exports = {
    chainWebpack: config => {
    config
    .module
    .rule('scss')
    .oneOf('normal')
    .use('postcss-loader')
    .tap(options => merge(options, {
    plugins: (loader) => new IconfontWebpackPlugin(loader)
    }))
    }
    }