{"id":13397975,"url":"https://github.com/webkul/vivid","last_synced_at":"2025-05-15T05:05:12.619Z","repository":{"id":32552805,"uuid":"136834267","full_name":"webkul/vivid","owner":"webkul","description":"a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.","archived":false,"fork":false,"pushed_at":"2023-01-07T02:22:23.000Z","size":1838,"stargazers_count":1805,"open_issues_count":39,"forks_count":85,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-14T07:11:35.924Z","etag":null,"topics":["javascript","javascript-framework","javascript-library","library","node","nodejs","svg","svg-icons","svg-images"],"latest_commit_sha":null,"homepage":"https://webkul.github.io/vivid","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webkul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-10T18:26:20.000Z","updated_at":"2025-04-28T11:17:00.000Z","dependencies_parsed_at":"2023-01-14T21:34:27.173Z","dependency_job_id":null,"html_url":"https://github.com/webkul/vivid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkul%2Fvivid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkul%2Fvivid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkul%2Fvivid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkul%2Fvivid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webkul","download_url":"https://codeload.github.com/webkul/vivid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254123671,"owners_count":22018616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-framework","javascript-library","library","node","nodejs","svg","svg-icons","svg-images"],"created_at":"2024-07-30T18:01:59.139Z","updated_at":"2025-05-15T05:05:12.597Z","avatar_url":"https://github.com/webkul.png","language":"JavaScript","readme":"![Vivid.JS Logo](https://webkul.github.io/vivid/assets/res/vivid-logo.svg)\n### Check [Beautiful Doc](https://webkul.github.io/vivid/docs.html) on Website.\n\n---\n\n# Introduction\nVivid.JS is an SVG Icons library which can be used to add highly customizable vibrant icons to the DOM without any dev dependencies.\n\nVivid.JS is easy to adapt and can bring SVG icons to life using html5 data attributes on the go. Icons can also be individually customized in terms of colors and size using html5 data attributes which gives more power to Vivid.JS library.\n\nVivid.JS SVG Icons ca be download and customized as per needs in different designing softwares like Photoshop and Sketch as well.\n\nDownload Vivid.JS Icons for [Sketch](https://bit.ly/vivid-sketch)\n\nDownload Vivid.JS Icons for [Photoshop](https://bit.ly/vivid-ps)\n\n# Getting Started\nTo get started with Vivid.JS, you just need to include `vivid-icons.min.js` to your project.\n\n# Installation\nCompiled vivid-icons.min.js JavaScript minified file can be directly linked from [jsDelivr](https://www.jsdelivr.com/) or [UNPKG](https://unpkg.com/#/) CDN or Vivid.JS can be included within your workflow using your favorite package managers as well.\n\n## Link from jsDelivr `(Recommended)` or UNPKG CDN\nYou can include Vivid Icons JavaScript file in the header section of your document as shown below -\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\nor\n\n```html\n\u003cscript src=\"https://unpkg.com/vivid-icons@1.0.10\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n## Package Managers\nYou can use either npm, yarn or bower to get the Vivid.JS package\n\nCopy and Paste the command below in your terminal to get package with npm -\n```cli\nnpm install vivid-icons\n```\nCopy and Paste the command below in your terminal to get package with yarn -\n```cli\nyarn add vivid-icons\n```\nCopy and Paste the command below in your terminal to get package with bower -\n```cli\nbower install vivid-icons\n```\n# Usage\nIncluding icons with Vivid.JS is very easy and quick to use.\n\n## Using an Icon\nAn SVG Icon can be easily included using the syntax `\u003ci data-vi=\"icon-name\"\u003e\u003c/i\u003e` , where `icon-name` is replaced by the unique name of the respective icon.\n\n### Example Code\n```html\n\u003ci data-vi=\"doc\"\u003e\u003c/i\u003e\n```\n\n## Customizing Icon Size\nTo customize the size of the respective icon, Add `data-vi-size=\"number\"` data attribute to `i` element to customize size of the icon.\n\n### Example Code\n```html\n\u003ci data-vi=\"doc\" data-vi-size=\"96\"\u003e\u003c/i\u003e\n```\n\n## Customizing Icon Colors\nEach Vivid Icon has upto three colors which are `primary`, `accent` and `prop`. Each color can be customized respectively using data attributes.\n\nAdd `data-vi-primary=\"#hexcode\"` data attribute to customize the primary color of the icon.\n\nAdd `data-vi-accent=\"#hexcode\"` data attribute to customize the accent color of the icon.\n\nAdd `data-vi-prop=\"#hexcode\"` data attribute to customize the prop color of the icon.\n\n### Example Code\n```html\n\u003ci data-vi=\"doc\" data-vi-primary=\"#2B13C1\" data-vi-accent=\"#00ECB1\" data-vi-prop=\"#CEFAFF\"\u003e\u003c/i\u003e\n```\n\n# Icon Customization\nOh! Yes, You can customize the default size and colors of the `Vivid.JS` SVG Icons Library.\n\n### Install Node.js\nFirst of all you need to [install the latest version of Node.js](https://nodejs.org/en/) (if you don't have it pre-installed), once you are over with Node.js installation, open up terminal and verify everything has setup correctly by running `npm -v` and it should return with something like `5.x.x`\n\n### Create your Project\n* Open terminal and create your project directory with `mkdir project-name` command.\n* Go to your project directory using `cd project-name` command.\n* Initialize your project by `npm init` command and enter the necessary details.\n\n### Install Vivid.JS Package\nInstall Vivid.JS SVG Icons Package with npm package manager using the command below -\n```cli\nnpm install vivid-icons\n```\n\nOnce, the vivid-icons is installed as a node module, go to node_modules/vivid-icons directory using `cd node_modules/vivid-icons` command and install **vivid-icons dependencies** with `npm install`.\n\n### Customize Icons\nGo to `src` directory of the installed package and open `config.js` file.\n\n#### `config.js` file looks like\n```javascript\nexport let iconConfig = { \n    size: \"48\", \n    primaryColor: \"#FF6E6E\", \n    accentColor: \"#0C0058\", \n    propColor: \"#FFFFFF\" \n } \n```\nUpdate the respective property values which needs to be changed.\n\n### Compile Vivid.JS Icons\nOnce you are done with updates in `config.js` head back to the terminal and run the following command -\n```cli\nnpm run build\n```\n\n### Voila! You're done\nOnce the compilation process is over, your browser will fire up to show the compiled Vivid SVG Icons in your browser from the `./dist/preview.html` file.\n\n**If you are using Windows environment replace the `\"open-html\": \"open ./dist/preview.html\"` with `\"open-html\": \"show ./dist/preview.html\"` in `package.json` file.**\n\n# Adding Icons\nIf you wish to create your very own Vivid.JS with your custom icons, Follow the steps below -\n\nOnce you have [installed Vivid.JS](#install-vividjs-package), `add/replace/remove` the icons from `./icons` directory\n\nMake sure the SVG Icons which has been added must have `vi-primary` and `vi-accent` class to the respective [SVG Elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element), so that the colors can be customized later from `src/config.js`.\n\n### Example Code\n```html\n\u003csvg id=\"chat\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"\u003e\n    \u003cdefs\u003e\n        \u003cstyle\u003e\n        .vi-primary {\n            fill: #ffb400;\n        }\n\n        .vi-accent {\n            fill: #070c2b;\n        }\n        \u003c/style\u003e\n    \u003c/defs\u003e\n    \u003cpath class=\"vi-primary\" d=\"M24,39.765A18.556,18.556,0,0,1,13.924,37.1L7,44V23.882l0.012,0.006C7.011,23.791,7,23.7,7,23.6,7,14.369,13.247,8,24,8s17,6.652,17,15.882S34.753,39.765,24,39.765Z\"/\u003e   \n    \u003cpath class=\"vi-accent\" d=\"M31.994,20.99a3,3,0,1,1-3,3A3,3,0,0,1,31.994,20.99ZM24,21a3,3,0,1,1-3,3A3,3,0,0,1,24,21Zm-8,0a3,3,0,1,1-3,3A3,3,0,0,1,16,21Z\"/\u003e   \n\u003c/svg\u003e\n```\nGo to the root directory of `vivid-icons` and execute `npm run build` command from terminal.\n\n# Credits\n© Copyright 2018 [Webkul Software](https://webkul.com), All rights reserved.\n","funding_links":[],"categories":["JavaScript","svg"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkul%2Fvivid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebkul%2Fvivid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkul%2Fvivid/lists"}