0.1.11 • Published 3 years ago
@zuckersalzundpfeffer/sugar-vg v0.1.11
sugar-vg
Installation
yarn add -D @zuckersalzundpfeffer/sugar-vg vue-svg-loader@0.16.0
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" />