sugar-vg

Installation

yarn add -D @zuckersalzundpfeffer/sugar-vg [email protected]

to get the inline svg workin, add a webpack loader to the project

module.exports = {
    chainWebpack: (config) => {
      const svgRule = config.module.rule("svg");
  
      svgRule.uses.clear();
  
      svgRule
        .use("babel-loader")
        .loader("babel-loader")
        .end()
        .use("vue-svg-loader")
        .loader("vue-svg-loader");
    },
  };

for nuxt try the follwing:

module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        use: [
          'vue-loader',
          'vue-svg-loader',
        ],
      });
    },
  },
};

Thereafter you should be able to use the iconfont.

Customize the icons

define a icons config at ./src/config/icons.js with all the icons you want to add to the project. You can place the config somewhere else but than the dynamic documentation will not work.

import category from "./icons/category.svg";
import arrowRight from "./icons/arrow-right.svg";
import date from "./icons/date.svg";
import description from "./icons/description.svg";
import goal from "./icons/goal.svg";
import ideas from "./icons/ideas.svg";
import maximize from "./icons/maximize.svg";
import place from "./icons/place.svg";
import resource from "./icons/resource.svg";
import search from "./icons/search.svg";
import tag from "./icons/tag.svg";
import time from "./icons/time.svg";
export default {
  "klg-category": category,
  "klg-arrowRight": arrowRight,
  "klg-date": date,
  "klg-description": description,
  "klg-goal": goal,
  "klg-ideas": ideas,
  "klg-maximize": maximize,
  "klg-place": place,
  "klg-resource": resource,
  "klg-search": search,
  "klg-tag": tag,
  "klg-time": time,
};

than implement the plugin with:

import sugarVGPlugin from "./plugin"
import icons from "./config/icons"
Vue.use(sugarVGPlugin,{icons:icons})

at least add the docu server to your package.json

{
    scripts: {
        ...
        "icon:docs": "cd ./node_modules/@zuckersalzundpfeffer/sugar-vg && yarn && NODE_ENV=production yarn serve"
        ...
    }
}

Now you can use the svg icons within your project

<sugar-vg icon="icon-name" size="80" color="#fff" />