webkul / vivid Goto Github PK

Would be nice to have one of those little i information icons

An icon that illustrates a linked article, such as a link of a chain.

I propose the following social media icons:

• Facebook
• Twitter
• Instagram
• Google +
• Youtube
• Vimeo
• Tumblr
• Snapchat
• Reddit
• Pinterest

Thanks for this icon set, the icons have proven to be well structured and easy to use.

One of the advantages of SVG's is that one can customize them with CSS for things like interactions (hover/click) and even animations. By being able to specify a className directly on the SVG, one does not have to wrap icons with an additional element.

Something like this would work great in my opinion:

<i data-vi="doc" data-class="vjs-icon"></i>

So that I can use CSS to customize all icons at once:

.vjs-icon .vi-primary {
  fill: blue;
}

Additionally this should also be configurable in config.js:

export let iconConfig = { 
   className: "vjs-icon"
} 

Curious to hear your thoughts for my proposal. I'd be happy to contribute to this feature.

Standard editing control icons such as cut, copy and paste.

I saw a bug that you don't support ie 11?

If that is so, you should list that in docs.

Also, yes, in ie 11 it fails due to 'forEach'

Plus icon

Using standard CSS variables var(--your-varible-name) in the primary and secondary data attributes works.

Might be helpful to include this tip in the documentation as it makes swapping colors globally for icons in a non-destructive manner possible, without editing the Vivid Icon source in node_modules/vivid-icon/src/config.js and then rebuilding from source every time a change is made.

Example for those unfamiliar with CSS variables:
<i data-vi="flame" data-vi-size="90" data-vi-primary="var(--primary)" data-vi-accent="var(--secondary)" data-vi-prop="var(--tertiary)"></i>

Then, set up your variables:
:root { --primary: #010101; --secondary: #333; --tertiary: #dbdbdb; }

And that's it! Hope this helps someone.

Hello, can you please include a thumbs up icon similar to facebook's like icon.
Thank you!

I included vivid-icons in a Vue.js project which uses vue-router for navigation. The problem is that although the icons are rendered upon first load, when navigating to another route, icons won’t be rendered but the original markup (<i data-vi=”...” />) stays in place.

Is there a way to force re-rendering of vivid-icons?

A workaround I found, is to export the watchInjection function of src/inject.js and then call it every time from the mount callback of the Vue components. Although this works, I would prefer to have icons somehow automatically re-rendered when it is needed.

Thank you for this library, nice work.

Icon with some bubbles on its top

Two requests in a row, im sorry, thank you very much.

Fingerprint icon

I have two of the "arrow-left" icons serving as Go Back links. I have one at the top and one at the bottom of the page.
Only the bottom icon is displaying, the top icon is vanishing with the entire tag disappearing in the HTML code. It appears that no matter how many of the same icon I put on the page, only the last rendered icon actually displays.
I am loading the code from your CDN, and each icon is identical in size and colour. No errors are being logged to console.

Hi,
I am using angular v6. How can I use your offering in Angular 6 where typescript is used, not javascript?

Cheers

Requesting the Star portion of the image https://farm8.staticflickr.com/7390/13075523155_65a44b8163_o.png
Many thanks.

Hello,
I would like to design and add new icons and use it/contribute. Any documentation to do so will help.

Thanks

Icon for Medical or First Aid or Ambulance, something related to Medical

I propose the following icons:

• Film icon
• Video camera icon
• Sound / audio (volume up / down / mute) icons
• Music icon
• Radio icon

Hi !
First of all: thanks for all those awesome icons.

What do you think about adding a 'RSS Feed' icon ?

Cheers,

An icon that could be used to represent a folder or directory.

I have a problem with dynamically added icons -> they don't show, check the following example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]" type="text/javascript"></script>
</head>
<body>
  <p>Here is a bag</p>
  <i data-vi="bag"></i>
  <p>Now add a box</p>
  <button id="add" type="button">Add a box</button>
  <script>
    
    $("#add").click(function(){
      $("body").append("<p>added, but where it is?</p>");
      $("body").append('<i data-vi="bag"></i>');
    });
    
  </script>
</body>
</html>

Is there a way to make this working?

Thanks

Hi!

Wouldn't it be better to be able to change the colors outside the package?
This way, when someone else installs a project with Vivid.js, the colors aren't lost.

First: Great project. I been looking to use SVG allot more for icons and this is great for me - so: THANK YOU. 👍

Just FYI - I'm not sure if you are already aware of this. Your showcase website does not actually render the icons to the page under IE (11) or older versions of iOS safari. In IE, I can see the <i/> tags in the page, which implies that your code did not replace them with the corresponding SVG image.

For the record: they DO display fine in IE11 when the SVG is inserted.

My guess is your inject.js file - it assumes that querySelectorAll() returns an Array, because right after you attempt to use the forEach() method:

Hi,
Significant packages of medical icons in svg are currently lacking. It is a very broad category, but I think it could pay for itself.

If you include this package, many of us would purchase such a package for use.

NB. I did not put specific icons because of the shear numbers that would be required for such a venture. If you are embarking on it, I would be happy to give some advice/collaborate with you as to expectations, types etc.

Please let me know what you think.

Cheers