mmf-fe / svgicon Goto Github PK

View Code? Open in Web Editor NEW

923.0 19.0 94.0 10.19 MB

SVG icon components and tool set

Home Page: https://mmf-fe.github.io/svgicon

License: MIT License

JavaScript 19.82% HTML 0.52% TypeScript 75.97% CSS 0.54% Shell 0.72% SCSS 2.43%

vuejs svg vue-svgicon svgo icon mutil-colors ssr react vue3

svgicon's Introduction

Svg Icon Packages

Features

Support multiple js frameworks
Load with webpack loader
Supports multiple colors, including gradients; Supports set fill and stroke attributes at the same time; supports original colors, and can modify a certain color; Supports zoom, animation etc.
Icon Preview

Packages

@yzfe/svgicon Generate the data required by the SVG icon component according to the incoming parameters (props)
@yzfe/vue-svgicon SVG icon component for vue
@yzfe/react-svgicon SVG icon component for react
@yzfe/svgicon-gen Generate icon data (icon name and processed SVG content) based on the content of the SVG file
@yzfe/svgicon-loader Load the SVG file as icon data (vue) or SVG icon component (react), the generated code can be customized
@yzfe/svgicon-viewer Preview SVG icon
@yzfe/vue-cli-plugin-svgicon A vue-cli plugin that can quickly configure svgicon
@yzfe/svgicon-polyfill SVG innerHTML compatible (IE)

Documentation

Refer to the documentation

License

MIT

svgicon's People

Contributors

Stargazers

Watchers

Forkers

perlou molunhui allenice dobbbri davidmr001 flowergu lly0122 corsen2000 tmaiaroto renedrie taldy debug-de-su-ka alexandrebonaventure morkro felipefreitasffs svonlanthen wahidrahim kommandersoftware cyberstrike kuzzy mindysky mavuio malashta gustavoquinalha simonfan ccondry gaara-luo trendingtechnology starsoft35 thommeo zidom franksoong dspangenberg chenyuan8059 smithai jerry-goodboy laoleo fxjs fapspirit ionlu ciwyaitd ludonope kartsims matiseams qimm neckli dan0314 paytmlabs xiopt samnanglorn omgimalexis hhy5277 struers rainylengend smekalin baisheng zohner januarsal-kindi rexyanglucky wallenweel paperscz w-rain xukaifengit trtrtr6 huyanyawei normandanny tenosiswono lanicon honghu1994 devopstoday11 preschian gxkai fvena longfeiyu127 cameronbaney dachengzi000 cklwblove warwaf shenoyguru gtiger666 xiaoruiguo shadowkimi520 shinjiesk el-jacko tejas6995 ryansegus dongmeng22 kusou1 ganymedenil robert-wloch-iits icc-tips zuopf769 winjs-dev

svgicon's Issues

Icon are not visible in firefox

I have a svg-logo before icon that i need. The problem is that i don't see the icon at all, it's just invisible.
fill property not work. I have very strange behavior and this is how problem could be solved:

I can delete svg icon of logo, then i see
I can set same clip-path property.

So that mean clip-path works wrong here? And i'm here because i cannot do anything with clip-path in this plugin.

Animation `begin` attribute doesn't work with dashes added by `bin/svg.js`

Context

bin/svg.js script edits the ID's in the original SVG files and makes them to match format svgicon-{path-to-file-}{name}-{originalID}. E.g. svgicon-search-a

ID can be used in the animate tag in begin attribute, e.g. to tell the animation to start after another animation: begin="another_animation_id.end"

Problem

Accordingly to begin attribute specification, characters - and + are interpreted to define an offset to the specified event. E.g. begin="another_animation_id.end + 2s"

Thus a construction like begin="svgicon-search-a.end" doesn't work. The dashes have to be either escaped (begin="svgicon\-search\-a.end") or replaced in the ID itself.

Possible Solution

Possible solution would be to replace the dashes with underscores in the bin/svg.js

Add a title property to show tooltip

To add a tooltip on a div you need to add a title attribute on it. With svg it is a little different, you need to add a title tag into the svg one.

Doesn't work:

<svg title="Some tooltip">
    <path>...</path>
</svg>

Work:

<svg>
    <title>Some tooltip</title>
    <path>...</path>
</svg>

It would be a nice feature if putting a title attribute on the svgicon would generage a title tag in the final svg one.

In some cases generates wrong quote characters in generated js files

This is what generating my icon with 1.2.6 instead of 1.2.3 suddenly produces (and breaks my build process, obviously):

var icon = require('vue-svgicon')
icon.register({
  'close': {
    width: 19,
    height: 18,
    viewBox: '0 0 19 18',
    data: `<path pid="0" d="M11.951 8.915l5.737-5.737A1.875 1.875 0 1 0 15.036.526L9.3 6.263 3.563.526A1.875 1.875 0 1 0 .911 3.178l5.737 5.737L.911 14.65a1.875 1.875 0 1 0 2.652 2.652L9.3 11.566l5.736 5.737a1.875 1.875 0 1 0 2.652-2.652L11.95 8.915z" fill-rule="evenodd"/>
  }
})

See it generates wrong quotation characters after data: ` which should be either " or '

Pls check, have downgraded to 1.2.3 and the problem is gone.

This is my command to generate the icons:

vsvg -s ./src/img/svg -t ./vue/assets/js/compiled-svg-icons

Here's my svgo.json:

{
  "full": true,
  "multipass": true,
  "plugins": [
    "removeDoctype",
    "removeXMLProcInst",
    "removeComments",
    "removeMetadata",
    "removeEditorsNSData",
    "cleanupAttrs",
    {
      "cleanupIDs": {
        "minify": false
      }
    },
    "removeUselessDefs",
    {
      "cleanupNumericValues": {
        "floatPrecision": 3,
        "leadingZero": true,
        "defaultPx": true,
        "convertToPx": false
      }
    },
    {
      "cleanupListOfValues": {
        "floatPrecision": 2,
        "leadingZero": true,
        "defaultPx": true,
        "convertToPx": false
      }
    },
    {
      "convertColors": {
        "shorthex": true,
        "shortname": false
      }
    },
    {
      "removeUnknownsAndDefaults": {
        "defaultAttrs": false
      }
    },
    "cleanupEnableBackground",
    "removeEmptyText",
    "collapseGroups",
    "removeEmptyAttrs",
    "removeEmptyContainers",
    "removeUnusedNS",
    "removeDesc",
    "convertPathData",
    "mergePaths"
  ],
  "js2svg": {
    "pretty": false,
    "indent": 1
  }
}

This is the svg that fails to generate properly:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="19px" height="18px" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46 (44423) - http://www.bohemiancoding.com/sketch -->
    <title>Combined Shape</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="maggi_mobile-290px_overlay-v2b" transform="translate(-256.000000, -746.000000)" fill="#FFFFFF">
            <path d="M267.951272,754.91463 L273.687811,749.17809 C274.420045,748.445857 274.420045,747.258673 273.687811,746.52644 C272.955578,745.794207 271.768394,745.794207 271.036161,746.52644 L271.036161,746.52644 L265.299621,752.26298 L259.563081,746.52644 C258.830848,745.794207 257.643664,745.794207 256.911431,746.52644 C256.179198,747.258673 256.179198,748.445857 256.911431,749.17809 L256.911431,749.17809 L262.647971,754.91463 L256.911431,760.65117 C256.179198,761.383403 256.179198,762.570587 256.911431,763.30282 C257.643664,764.035053 258.830848,764.035053 259.563081,763.30282 L259.563081,763.30282 L265.299621,757.56628 L271.036161,763.30282 C271.768394,764.035053 272.955578,764.035053 273.687811,763.30282 C274.420045,762.570587 274.420045,761.383403 273.687811,760.65117 L273.687811,760.65117 L267.951272,754.91463 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>

Index files for subfolders

Hello, first of all, I want to say that this plugin did the job well.

But I want to suggest one small improvement. In big projects with hundreds of icons, it doesn't make much sense to import all icons at once, because bundle will become huge. But it is also too complicated to import icons one by one... Wouldn't it be much easier to generate an index.js file for each subfolder and not include root index.js files from subfolders? In this case, it would be much easier to manage imports of icons and icons groups:

// Import icons from root directory only, without subfolders. This import may be done in root app component or layout.
import 'icons'

// Import all icons from subfolder to import in a specific component.
import 'icons/my-component1'

Does it make sense?

I'm not very familiar with node.js, but I've pushed some quick workaround into fork, can you please take a look? What do you think, can be something similar implemented?

hello

请问一下现在实现的svg只有dome上的那些吗

Options for default values

Currently the values for height and width are set to 16 pixels.
But most of the times icons are used corresponding with text, so they are used to be set to 1em.

Right now one has to pass height/width to each and every component.
Would't it be possible to set additional option in Vue.use('svgicon', {})?

Regards,
Manuel

Wrong order of 'width' and 'height' in 'viewBox'

This is what generating in icon.js:

icon.register({
'icon': {
width: 20,
height: 24,
viewBox: '0, 0, 24, 20',
data: ... some data ...
}
})

Looks like viewBox should be '0, 0, 20, 24', so my svg is smaller than I expected.

stroke-width is forgotten

I try to convert some svgs using the following command: vsvg -s ./src/assets/icons -t ./src/components/icons.

All icons are converted properly. However there is an icon representing a circle that is not completely converted: the circle tag in it contains a stroke-width property which is not present in the js file corresponding to it after conversion. I expected the js file to contain the stroke-width value.

The content of the svg file:

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><style>.cls-1{fill:none;stroke:#1367fb;stroke-width:2px;}</style></defs><title>number2</title><circle id="Oval" class="cls-1" cx="25" cy="25" r="24"/></svg>

The content of the js file:

/* eslint-disable */
var icon = require('vue-svgicon')
icon.register({
  'circle': {
    width: 16,
    height: 16,
    viewBox: '0 0 50 50',
    data: '<defs/><circle pid="0" id="Oval" class="cls-1" cx="25" cy="25" r="24"/>'
  }
})

I expect the data field to contain 'stroke-width="2"'.

Cannot make it work with typescript

I´m getting the following error when trying to use vue-svgicon in a vue.js 2.x project with typescript.

"message": "Could not find a declaration file for module 'vue-svgicon'. 'xxx/node_modules/vue-svgicon/dist/index.js' implicitly has an 'any' type.\n Try npm install @types/vue-svgicon if it exists or add a new declaration (.d.ts) file containing declare module 'vue-svgicon';",

vsvg generate doesn't work but deletes output directory

I'm trying to get this to work with nuxt but it seems like I'm failing early. I put one svg file in the source directory and executed vsvg -s ./svg -t ./assets/svg – unfortunately everything that happens is that the directory specified through -t gets deleted. I thought it may be needing bash to run and I was using fish shell but then exited fish and started bash just to see the same behaviour.

What am I missing?

This is for version 2.1.3

svg not displayed: iconData null

The icons are not being displayed. Using this script, I've got the compiled svgs in src/compiled-icons:

 "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"

When viewed in DevTools, the svg-icon component's iconData computed property is null, which suggests that it doesn't know where the icons are. Do I have to explicitly import each individual icon (or the entire icon directory)?

If height or width is not set it will default to empty string ""

Which causes warnings and weird renderings in browsers.

It would be better to not declare width when the property is missing or set the default css value "auto".

Bug when used with Nuxt (generating static files)

Hello, I'm using your awesome plugin with Nuxt and when I try to generate static files I receive this error and the page I include <svgicon> isn't rendered.

==== Error report ====
Route: '/account/login'
ReferenceError: document is not defined
    at o (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:2371)
    at r (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:2193)
    at t.exports (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:3814)
    at Object.<anonymous> (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:932)
    at e (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:324)
    at VueComponent.r (PATH/admin-nuxt/node_modules/vue-svgicon/dist/index.js:1:760)
    at callHook (PATH/admin-nuxt/node_modules/vue/dist/vue.runtime.common.js:2663:21)
    at VueComponent.Vue._init (PATH/admin-nuxt/node_modules/vue/dist/vue.runtime.common.js:4220:5)
    at new VueComponent (PATH/admin-nuxt/node_modules/vue/dist/vue.runtime.common.js:4394:12)
    at createComponentInstanceForVnode (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:6817:10)
    at renderComponentInner (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:6993:40)
    at renderComponent (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:6968:5)
    at RenderContext.renderNode (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:6884:5)
    at RenderContext.next (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:2189:14)
    at cachedWrite (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:2049:9)
    at renderElement (PATH/admin-nuxt/node_modules/vue-server-renderer/build.js:7108:5)

I also having other problems (reported here) and I thinking is caused by something inside the vue-svgicon.

Could you help me? Thanks in advance!

Support to asynchronous register an icon

I'm doing code-split with my application icons, so I've changed the default template and in usage I've noticed that I can't asynchronous register an icon.

import { register } from 'vue-svgicon';

import icon from './icons/engine';    // Okay
register({ [icon.name]: icon.data }); //

import('../icons/trash')                                              // Fail
  .then(({ default: icon }) => register({ [icon.name]: icon.data })); //

Upgrading to version 3.0.2 produces errors while running the project

I've been working with v. 2.1.5 but recently decided to upgrade to v. 3.0.2. After I did I started recieving compilation erros when running my project in dev mode:

ERROR in C:\Projects\Wonder\frontend-nuxt\plugins\svg-icons\index.ts(4,9)
      TS2345: Argument of type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
  Type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' is not assignable to type 'PluginFunction<any>'.
    Type 'typeof import("C:/Projects/Wonder/frontend-nuxt/node_modules/vue-svgicon/typings/index")' provides no match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'.

icons themselves are generated successfully using this command:

vsvg -s ./assets/svg -t ./assets/icons --ext ts --es6

能否，给指定的 svg 库的名字加前缀呢？

比如说 fa 和iconic都有一个相同名字的 icon，这样就不会冲突！

This dependency was not found: 'icons/vue in'

How can i use vue-svgicon?
What is the introduction address of the component?
I have been run the script 'npm install vue-svgicon --save-dev'

Disabling eslint on generated .js files

Could you write /* eslint-disable */ at the top of every genereated file to avoid tons of eslint warnings?

SSR. Doesn't work => icon.register() is not a function

Hello and thank you for simplifying workflow with svg icons.

Story

I have read the #2, so I have tried the use of adding an alias to already existing ones:

'vue-svgicon$': 'vue-svgicon/component/svgicon.vue'

I am using the latest vue.js, webpack, and other deps.
Basically, I am using almost identical boilerplate to vue-hackernews.

Problem

I have checked my SVGs without SSR, they work fine.
However with SSR, it then produces an error:

icon.register is not a function

Please let me know any ideas on what might be an issue.

Latest version (v1.1.5) doesn't work on windows

When I run vsvg -s ./asset/svg -t ./src/svg on my windows machine it keeps running forever.

I checked the source and found the issue. The getFilePath function is buggy.

Function argument filename is: 'C:/projects/vue-skeleton/asset/svg/magnifier.svg'. While the result of path.resolve(args.s), '') is 'C:\projects\vue-skeleton\asset\svg'.

Result: 'C:\projects\vue-skeleton\src\svg\C:\projects\vue-skeleton\asset\svg\magnifier.js'

The difference in slashes result in a incorrect filePath that makes the app run infinitely.

Error: ENOENT: no such file or directory icon.tpl.txt

please help me,i got error message like this:

$ npm run svg

> [email protected] svg E:\dev_workspace\cloud_static
> node ./build/svg.js -s ./src/svg -t ./src/icons

fs.js:641
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'E:\dev_workspace\cloud_static\icon.tpl.txt'
    at Error (native)
    at Object.fs.openSync (fs.js:641:18)
    at Proxy.fs.readFileSync (fs.js:509:33)
    at Object.<anonymous> (E:\dev_workspace\cloud_static\build\svg.js:34:16)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "svg"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] svg: `node ./build/svg.js -s ./src/svg -t ./src/icons`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] svg script 'node ./build/svg.js -s ./src/svg -t ./src/icons'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the factoring_weixin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./build/svg.js -s ./src/svg -t ./src/icons
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs factoring_weixin
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls factoring_weixin
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     E:\dev_workspace\cloud_static\npm-debug.log

package.json:

{
  "name": "factoring_weixin",
  "version": "1.0.0",
  "description": "factoring cloud system for weixin",
  "author": "huilin.liang <[email protected]>",
  "private": true,
  "bin": {
    "vsvg": "build/svg.js"
  },
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "svg": "node ./build/svg.js -s ./src/svg -t ./src/icons"
  },
  "dependencies": {
    "fastclick": "^1.0.6",
    "fs-plus": "^3.0.1",
    "glob": "^7.1.2",
    "svgo": "^0.7.2",
    "vue": "^2.2.2",
    "vue-router": "^2.2.0",
    "vuex": "^2.1.1",
    "vuex-i18n": "^1.3.1",
    "vux": "^2.2.1",
    "yargs": "^8.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "compression-webpack-plugin": "^0.3.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "node-sass": "^4.5.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "semver": "^5.3.0",
    "url-loader": "^0.5.7",
    "vconsole": "^2.5.2",
    "vue-awesome": "^2.3.3",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-svg-icon": "^1.2.9",
    "vue-svgicon": "^1.2.6",
    "vue-template-compiler": "^2.2.4",
    "vux-loader": "^1.0.70",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1",
    "yaml-loader": "^0.4.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "iOS >= 7",
    "Android >= 4.1"
  ]
}

my project file list:

---build
------svg.js
---src
------icons
------svg

stroke-width control and optional fill="false" as default

Several packages of icons are only made with feather-icons, IOS line icons, etc ... I know that the fill="false" option causes these types of svg's to work correctly. But it would be smarter to globally set the fill option to false, , for these cases where we will only work with stroke based icons/svg..

To complete and make this tool even better, we might have an option to set the stroke-width, both globally and individually.

I do not have enough knowledge to send a PR, but I leave here a simple suggestion that I hope to help.

icon not reactive when initialize with empty name

Reactivity fails : If we create an icon with dynamic name with initial value set to an non existing id, it is not rendered when the name value change.


<template>
  <div>
    <svgicon
      :icon="name"
    />
    <button @click="changeIcon">Test</button>
  </div>
</template>
<script>
import svgicon from 'vue-svgicon';

export default {
  name: 'MyIcon',
  components: {
    svgicon,
  },
  data() {
    return { name: '' };
  },
  methods: {
    changeIcon() {
      this.name = 'icon';
    },
  },
};
</script>

If name is initialized with an existing icon name, it works.

Suport Async

#23

Escaping single quotes

Hey there! Could you escape single quotes? Some icons I'm trying to import use font-family inside and because of some font-family names are wrapped with '' break it...

in ./static/icons/underline-08.js
Module build failed: SyntaxError: Unexpected token, expected , (9:74)

   7 |     height: 16,
   8 |     viewBox: '0 0 48 48',
>  9 |     data: '<text transform="rotate(.945 -2223.584 455.691)" font-family="'Helvetica-Light'" font-size="44">U</text><path pid="0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M12 42h25"/>'
     |                                                                           ^
  10 |   }
  11 | })
  12 |

Regards,

Add newline to <icon>.js

First of all thanks for great work!
It would be nice to add newline to each js file with icon, to prevent eslint error http://eslint.org/docs/rules/eol-last (for those who use it),
for example, add \n here will fix the issue:
https://github.com/MMF-FE/vue-svgicon/blob/master/bin/svg.js#L130

Import Individually don't work

Import individually, do not working for me.

I follow all steps of README.MD ....

// main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import SimpleVueValidation from 'simple-vue-validator';
import 'bootstrap-vue/dist/bootstrap-vue.css';

// vue-svgicon here
import * as svgicon from 'vue-svgicon';

import App from './App';
import EventBus from './core/EventBus';
import EToaster from './components/EToaster';
import templates from './lib/templates';

import router from './router';
import store from './store';

Vue.use (svgicon);
Vue.use (BootstrapVue);
Vue.use (SimpleVueValidation, {templates});
Vue.use (EToaster);

Vue.prototype. $ Bus = EventBus;

Vue.config.productionTip = false;

/ * eslint-disable no-new * /
const app = new Vue ({
    the: '#app',
    router,
    store
    components: {App},
    render (createElement) {
        return createElement ('App');
    },
});

window.app = app;

...but all the imports I made in my templates return:

This dependency was not found:
* icons/filter in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/EFilter.vue
To install it, you can run it: npm install --save icons/filter

I'm using Vuejs with Webpack. And my output icons are in src/components/icons.
And i work on Windows 10 OS.

How do I make my imports work as well as their instructions? Eg.: import 'icons/[name-of-icon]' ?

Same svg, different name not showing. IconData: undefined

I have two SVG files "folder.js" and "anotherfolder.js" with exact same code.

The first one is rendering, the second is not (loading with the same tag, just changing the "icon" property). Vue extension is showing "IconData: undefined" for the second one.

ie11 support

vsvg commandline silently fails when using absolute paths.

Hello. Thank you for vue-svgicon. Really enjoy having svg icons in my Vue project!
I noticed something that may be an issue, namely if I use the vsvg commandline together with absolute paths, it seems to fail without notice. This works:

vsvg -s ./build/__tmp/bologna/svg -t ./src/brand/bologna/icons Generated icon: arrow Generated icon: availability Generated icon: check Generated icon: close ...

While this doesn't:
vsvg -s /home/myuser/projects/vialer-js/build/__tmp/bologna/svg -t /home/myuser/projects/vialer-js/src/brand/bologna/icons

I would expect the same build output.

Uncaught TypeError: icon.register is not a function

I'm getting Uncaught TypeError: icon.register is not a function when compiling using Laravel-Mix watch and Browsersync. The initial compile is fine but when I edit a file which has an svgicon element in it the reload gives me that error. All of my svgicon elements are in Vue components.

NPM Packages installed using default configs:

The part of my compiled app.js file that is erroring:

var icon = __webpack_require__(1);
icon.register({
  'add-to-stack': {
    width: 16,
    height: 16,
    viewBox: '0 0 20.35 20.35',
    data: '<defs><clipPath id="a"><path pid="0" class="a" d="M.98 0h18.4v20.35H.98z"/></clipPath></defs><path pid="1" class="b" d="M1.38 15.55l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/><g class="c"><path pid="2" class="d" d="M1.38 15.55l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/></g><path pid="3" class="b" d="M1.38 13.78l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/><g class="c"><path pid="4" class="d" d="M1.38 13.78l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/></g><path pid="5" class="b" d="M1.38 12l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/><g class="c"><path pid="6" class="d" d="M1.38 12l8.8 4.4 8.8-4.4-8.8-4.4-8.8 4.4z"/><path pid="7" class="b" d="M10.18 11.2A5.2 5.2 0 1 0 5 6a5.2 5.2 0 0 0 5.2 5.2"/><path pid="8" class="e" d="M16.17 6a6 6 0 1 0-6 6 6 6 0 0 0 6-6m-2.5.5a.5.5 0 0 1-.5.5h-2v2a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V7h-2a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h2V3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2h2a.5.5 0 0 1 .5.5z"/></g>'
  }
});

Support for custom SVGO config

Hello!

When generating files with vsvg command, there is SVGO optimizer before saving the file. Pretty useful, but there is case when IE11 drops parsing error:

HTML1500: Tag cannot be self-closing. Use an explicit closing tag.

The reason for this error is that SVGO produces a svg with self-closing tags inside (like <path />, <circle /> and etc.). This behavior can be fixed with switching them off. It is possible with this config:

{
  "js2svg": {
    "useShortTags": false
  }
}

I propose two solutions to the problem:

Make a special param only for this case. Very simple, but solves only this problem.
Add support for full custom SVGO config. Much more flexible, but I don't know whether or not this solution will conflict with the existing configuration.

I can do this by myself, but I need advice on which solution is preferable.

click change pito

hi,
when I open a window or click it sometimes happens that the svg turns into a square do you know why?

Thank you in advance for your assistance

Module tslib used by vsvg is not in package.json

When running vsvg an error is thrown saying that the required module tslib is not found, manually installing the module fixes it.

Suggested fix: Add the tslib module to the package.json

After Build process I don't see any svg

While trying in development with webpack-dev-server everything is great!
After the compilation (made with webpack, with a conf similiard to the default created with vue-cli) instead I see no svg, my guess is an import issue but I really don't know.
src tree:

assets
- svg-origin (folder with the real svgs to "compile")
- svg (output of the compilation made with vue-svgicon)
- various pngs....
components
helpers

the build folder is as follows:

target/
- ce/
  - manager/
    - build.js
    - assets/
      - various pngs...

Am I missing something?

SVG Sprite

Hi thanks for your work.
Is it possible to generate an external svg sprite with your script?

Thanks

svg is not support vue event

hello，this plugin is very good，but have one problem。svg tag is not support vue event，so it is not working when i use @click。is add this feature in the future？

pb color

Hello,
Here is the svg right that it will have to render and go to that seen-svgicon returns to me

file js:

var icon = require('vue-svgicon')
icon.register({
  'icon-tooltip': {
    width: 12,
    height: 12,
    viewBox: '0 0 12 12',
    data: `<g _fill="none" fill-rule="evenodd">
<path pid="0" d="M10.728 3.26A5.434 5.434 0 0 0 8.74 1.273 5.33 5.33 0 0 0 6 .54a5.33 5.33 0 0 0-2.74.731c-.838.49-1.499 1.15-1.988 1.989A5.329 5.329 0 0 0 .54 6c0 .993.243 1.903.73 2.74.49.838 1.151 1.499 1.99 1.988A5.33 5.33 0 0 0 6 11.46a5.33 5.33 0 0 0 2.74-.73c.838-.49 1.499-1.151 1.988-1.99A5.33 5.33 0 0 0 11.459 6a5.33 5.33 0 0 0-.73-2.74z" _stroke="#0175D8"/>
<path pid="1" d="M6.755 8.727a.177.177 0 0 1-.05.13.177.177 0 0 1-.131.051H5.483a.177.177 0 0 1-.13-.05.177.177 0 0 1-.052-.131V7.636c0-.053.017-.097.051-.13a.177.177 0 0 1 .13-.052h1.092c.053 0 .096.017.13.051a.177.177 0 0 1 .051.131v1.09zM8.14 5.369a1.5 1.5 0 0 1-.16.344c-.058.09-.142.18-.252.273-.11.093-.197.159-.262.199-.064.04-.157.093-.278.162a.958.958 0 0 0-.31.28c-.08.116-.121.21-.121.282a.177.177 0 0 1-.052.13.176.176 0 0 1-.13.052H5.483a.177.177 0 0 1-.13-.051.177.177 0 0 1-.052-.131v-.205c0-.253.1-.491.298-.713.2-.221.418-.385.657-.491.181-.083.31-.169.386-.256a.509.509 0 0 0 .114-.346c0-.125-.072-.237-.214-.336a.832.832 0 0 0-.485-.147.827.827 0 0 0-.489.136c-.125.091-.288.265-.488.523a.168.168 0 0 1-.142.068.16.16 0 0 1-.108-.034l-.75-.568c-.087-.068-.102-.148-.046-.239.485-.806 1.188-1.21 2.108-1.21.33 0 .651.078.966.233.314.155.576.375.787.66a1.525 1.525 0 0 1 .244 1.385z" _fill="#0175D8"/></g>`
  }
})

icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>icon company</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Component/ligne/publication" transform="translate(-637.000000, -26.000000)">
            <g id="icon/question" transform="translate(637.000000, 26.000000)">
                <path d="M10.7281334,3.26073663 L10.7281726,3.26080384 C10.2387512,2.42227044 9.5778248,1.76134408 8.73933061,1.27194548 C7.90309314,0.783965849 6.99325517,0.540857143 6.00009524,0.540857143 C5.00692813,0.540857143 4.09683674,0.784016142 3.26084587,1.27195364 C2.42227918,1.76125604 1.76136313,2.42215032 1.27191442,3.26081783 C0.783939418,4.09681075 0.540761905,5.0068901 0.540761905,6 C0.540761905,6.99297062 0.783919616,7.9029324 1.2718159,8.73917654 C1.76130473,9.57773783 2.42227868,10.2387118 3.26078423,10.728066 C4.09685626,11.2159999 5.00686574,11.4591429 6,11.4591429 C6.99316711,11.4591429 7.9032585,11.2159839 8.73922976,10.7280578 C9.5776544,10.2387873 10.2386077,9.5778122 10.7280464,8.73924937 C11.215903,7.90316035 11.4590476,6.99304157 11.4590476,6 C11.4590476,5.00690123 11.2159216,4.09677042 10.7281334,3.26073663 Z" id="Path" stroke="#0175D8" stroke-width="1"></path>
                <path d="M6.75548352,8.72683808 C6.75548352,8.77983182 6.73833028,8.8234122 6.70430273,8.85743975 C6.6703449,8.89146731 6.62676452,8.90848109 6.57377079,8.90848109 L5.48293657,8.90848109 C5.42994284,8.90848109 5.38636246,8.89146731 5.35226518,8.85743975 C5.31816789,8.8234122 5.30115412,8.77983182 5.30115412,8.72683808 L5.30115412,7.63600387 C5.30115412,7.58301013 5.31816789,7.53942976 5.35226518,7.50533247 C5.38636246,7.47137465 5.42994284,7.45436087 5.48293657,7.45436087 L6.57377079,7.45436087 C6.62676452,7.45436087 6.6703449,7.47137465 6.70430273,7.50533247 C6.73833028,7.53942976 6.75548352,7.58301013 6.75548352,7.63600387 L6.75548352,8.72683808 L6.75548352,8.72683808 Z M8.13875948,5.36933628 C8.09141376,5.50949077 8.03842003,5.62412458 7.97970854,5.71309828 C7.92099706,5.80207197 7.83669519,5.89299806 7.72680291,5.9857371 C7.61711983,6.07854587 7.52995908,6.14485777 7.46546012,6.1846728 C7.40117035,6.22434837 7.30829186,6.27838803 7.18717328,6.34651288 C7.06221963,6.41847279 6.95909103,6.51218803 6.87771775,6.62772832 C6.79627475,6.74319888 6.75555325,6.83698385 6.75555325,6.90887403 C6.75555325,6.9619375 6.73840001,7.00551787 6.70437246,7.03954543 C6.67041463,7.07364271 6.62683425,7.09065649 6.57384052,7.09065649 L5.4830063,7.09065649 C5.43001257,7.09065649 5.38643219,7.07364271 5.35233491,7.03954543 C5.31823762,7.00551787 5.30122384,6.9619375 5.30122384,6.90887403 L5.30122384,6.70429032 C5.30122384,6.45054795 5.4005871,6.21284315 5.59945307,5.99131539 C5.79831903,5.7697179 6.01705765,5.60592542 6.25566892,5.49986822 C6.43738165,5.41661227 6.56617037,5.33133419 6.64189563,5.24424317 C6.71776035,5.15715215 6.75562298,5.04154213 6.75562298,4.89769203 C6.75562298,4.77266865 6.68449981,4.66096344 6.54246265,4.56243692 C6.40042549,4.46398014 6.23865514,4.41475175 6.05680295,4.41475175 C5.85981966,4.41475175 5.69700338,4.4602148 5.56821465,4.55114089 C5.44319127,4.64199726 5.28037499,4.81624903 5.07962635,5.07375675 C5.04552907,5.11921979 4.99818335,5.14202104 4.9375892,5.14202104 C4.89212615,5.14202104 4.85614619,5.13065528 4.82964932,5.10799349 L4.07978796,4.53991459 C3.99269694,4.47172002 3.97756584,4.39222941 4.03432492,4.30130332 C4.51914787,3.49461315 5.22166351,3.0912332 6.14194157,3.0912332 C6.47154866,3.0912332 6.79348561,3.16891086 7.10782213,3.32419645 C7.42215866,3.47941231 7.68440792,3.69912713 7.89470938,3.98320145 C8.10473192,4.26720603 8.20995238,4.57589454 8.20995238,4.90919725 C8.2097432,5.0758486 8.18596574,5.22918179 8.13875948,5.36933628 L8.13875948,5.36933628 Z" id="Shape" fill="#0175D8" fill-rule="evenodd"></path>
            </g>
        </g>
    </g>
</svg>

Thanks for your help

namespace icons

Awesome job with this! I really appreciate it.
I was curious if it's possible to namespace icons? Basically I want to use multiple icon sets, but worry about conflicting names. Could I either import icons with a prefix to their names or can they be under different directories maybe?

I'm sure I could go through each file and rename them, but an automated process contained within this tool would be great.

Uncaught TypeError: Cannot read property 'register' of undefined

Cannot recognize .register inside icon.
^3.0.0

Spinner svg

Cannot find if it supports spinner svg (animated)?

Command vsvg not found

Hi, I've just install this package with npm --save-dev and when run vsvg command, even with bash or zsh shell it throw an error vsvg: command not found.
Is there I missing something?

I am on macOS 10.13.6

Thanks.

Problem in production

Hi, I've a big problem with your lib. I use it correctlly in development but when I build it for production the icons are lost. I see the svg tag into my page but nothing into it.
The path of svg was lost.

Please can you help me please?
I use webpack to build my production files.

SVG images get filled with black color

Sometimes (I don't know the reason for that) my SVG icons get filled with black color. This happens because the plugin is renaming the fill attribute to _fill

Preserve original icon color

Hello, when I run this script on a colored svg, the colors are lost, so for some icons like the one below, it would be painful to write each color, there's a way to keep the color when converting?

Remove default classes

How can I remove the default classes vue-svgicon sets every time the component is used?
I would like to be able to only use the classes I input, or nothing.

The reason for this is that the default classes will always override my classes width and height properties, and I don't like to define them in the component because I have groups of icons with certain sizes, and other groups with others, I would just be repeating myself in every component.

I also tried adding this to my main.js

Vue.use(VueSVGIcon, {
  defaultWidth: '',
  defaultHeight: ''
})

but it didn't work, becuase it will still use the .svg-icon[data-v-7ef413f4] properties.
Solutions?
Thanks

Double fill or stroke property fix

refs: #40

primary module does not work on the server

The primary module referred to by main will not run on the server due to its reference to document.

I am building a universal application using Nuxt.js and this caused problems for us.

I am able to work around this by using an alias to re-point vue-svgicon at the source itself, which does not have any references to document.

This code seems perfectly capable of running in both environments. Looking at the build for this project I am not able to understand why webpack is adding references to document at all. I'm not sure what feature it is trying to provide for the library by doing so.

Please let me know if I can help further.

SVG not showing

Hi there,

Great stuff you have here. I am however have a small problem getting the svg icon to display.

I am currently using Laravel Elixir and webpack for my current build process. I have installed your page with no issues, added it to my bootstrap.js file as follow:

require('./bootstrap');

window.Vue = require('vue');

import vueRouter from 'vue-router';
import veeValidate from 'vee-validate';
import xRegExp from 'xregexp';
import * as svgicon from 'vue-svgicon';

window.VueRouter = vueRouter;
window.VeeValidate = veeValidate;
window.XRegExp = xRegExp;

Vue.use(VueRouter);

Vue.use(svgicon, {
    tagName: 'svgicon'
});

Generated the svg js files which are are located in a folder at the root of my project (src/svg-icons). Because my project is quite modular, in my vue component, I am have done the following:

<template>
    <div>

        <div class="box box-info chat-choice-interface">
            <div class="box-header with-border">
                <h3 class="box-title"></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Enter HTML Content Here -->
                        <h3 class="text-center">This is a test chat app</h3>
                        <p>&nbsp;</p>
                        <h4 class="text-center">Who would like to contact?</h4>
                        <p>&nbsp;</p>
                        <form role="form">
                            <div class="btn-group btn-group-justified" data-toggle="buttons">
                                <label v-on:click="setChatOption('test')"
                                       class="btn btn-default btn-flat-chk" id="triage">
                                    <div class="radio">
                                        <input
                                                name="chatOption"
                                                type="radio"
                                                value="test"/>
                                        <svgicon icon="user" width="200" height="200"></svgicon>
                                        Test Support
                                    </div>
                                </label>                                                               
                            </div>
                            <p>&nbsp;</p>
                            <div class="chat-description">
                                <div v-if="isTest">
                                    <h4>Test</h4>
                                    <p>Item description</>
                                </div>
                              
                            <div class="row">
                                <div class="col-md-6">
                                    <router-link to="/" class="btn btn-default btn-block">Back</router-link>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-primary btn-block" v-bind:disabled="!isChatOptionSelected">Get started</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import from './../../../../../src/svg-icons/user';

    export default {
        mounted() {
            console.log('Component mounted.')
        },

        data: function() {
            return {
                chatOption: null,
                chatOptionSelected: false                
            }
        },

        methods: {
            setChatOption: function (option) {
                 let self = this;

                self.chatOption = option;
                self.chatOptionSelected = true;

                // Set Parent Data
                this.$parent.newChatOptions.choice = this.chatOption;
            },
        },

        computed: {
            isChatOptionSelected: function () {
                return this.chatOptionSelected !== false;
            },
       },
    }
</script>

<style>
    .chat-choice-interface {
        height: 900px;
    }

    .chat-description {
        min-height: 460px;
    }

    #triage.active, #triage.focus{
         background-color: #0B90C4 !important;
     }

    #now-pharmacy.active, #now-pharmacy.focus{
        background-color: #00ca6d !important;
    }
</style>

The problem I having is that when everything is compiled, the svg code shows up but the icon (aka path data) does not show. So in effect, I have a blank svg icon being displayed.

<svg data-v-7ef413f4="" version="1.1" viewBox="0 0 100 100" class="vue-icon svg-icon svg-fill" style="width: 200px; height: 200px;"></svg>

Any ideas where I am going wrong?