### Quick Start HTML Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/feather/README.md
A basic HTML file demonstrating how to use Feather icons with client-side JavaScript.
```html
```
--------------------------------
### NPM Installation
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/coreui-icons/README.md
Install CoreUI Icons using NPM.
```shell
npm install @coreui/icons --save
```
--------------------------------
### JavaScript Replacement Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/eva-icons/README.md
Complete HTML example demonstrating how to use Eva Icons with JavaScript replacement.
```html
```
--------------------------------
### Yarn Installation
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/coreui-icons/README.md
Install CoreUI Icons using Yarn.
```shell
yarn add @coreui/icons
```
--------------------------------
### Installation via npm
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/remix-icon/README.md
Install Remix Icon using npm for webfont usage.
```bash
npm install remixicon --save
```
--------------------------------
### Command line install
Source: https://github.com/givanz/vvveb/blob/master/README.md
This command line instruction shows how to install the Vvveb project using the CLI, specifying various parameters like host, user, password, database, admin credentials, and engine type. It also mentions alternative engine options.
```bash
php cli.php install module=index host=127.0.0.1 user=root password=1234 database=vvveb admin[email]=admin@vvveb.com admin[password]=admin engine=mysqli
```
--------------------------------
### Install Feather Icons
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/feather/README.md
Install Feather Icons using npm.
```shell
npm install feather-icons
```
--------------------------------
### Install npm dependencies
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/ikonate/README.md
To generate generic demo files and SVG sprites, install npm dependencies first.
```bash
npm install
```
--------------------------------
### Installation with npm
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/tabler-icons/README.md
Install the Tabler Icons package using npm.
```bash
npm install @tabler/icons --save
```
--------------------------------
### Installing Unicons via npm
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/unicons/README.md
Command to install the Unicons npm package.
```bash
npm install --save @iconscout/unicons
```
--------------------------------
### Install via npm
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/boxicons/README.md
Install boxicons via npm.
```bash
$ npm install boxicons --save
```
--------------------------------
### JavaScript Usage Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/iconoir/README.md
Example of how to import an icon using the iconoir NPM package.
```javascript
import Iconoir from 'iconoir/icons/iconoir.svg'
```
--------------------------------
### Install with npm
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/ikonate/README.md
You can also download the icons using npm package manager.
```bash
npm install ikonate
```
--------------------------------
### Local Component Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
Example of importing and using an icon as a local React component.
```javascript
import React from 'react';
// local path
import { ICONNAME } from "./ {ICONNAME} "
function App() {
return (
);
}
export default App;
```
--------------------------------
### Example HTML Page with Icons
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
A complete HTML example demonstrating how to include and use CSS.gg icons.
```html
Document
```
--------------------------------
### Install NPM Package
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/eva-icons/README.md
Install the eva-icons package using npm.
```bash
npm i eva-icons
```
--------------------------------
### Coloris Instance 2 Configuration
Source: https://github.com/givanz/vvveb/blob/master/public/js/libs/coloris/examples.html
This snippet shows how to configure a Coloris instance with a 'polaroid' theme.
```javascript
Coloris.setInstance('.instance2', {
theme: 'polaroid'
});
```
--------------------------------
### NPM Package Installation
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/iconoir/README.md
Instructions for installing the iconoir NPM package using yarn or npm.
```bash
yarn add iconoir
# or
npm i iconoir
```
--------------------------------
### CDN Installation
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/coreui-icons/README.md
Link to CoreUI Icons CSS files via CDN.
```html
```
```html
```
--------------------------------
### Advanced Animation Attributes Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/eva-icons/README.md
Example demonstrating 'data-eva-hover' and 'data-eva-infinite' attributes for animation control.
```html
```
--------------------------------
### Coloris Instance 3 Configuration
Source: https://github.com/givanz/vvveb/blob/master/public/js/libs/coloris/examples.html
This snippet demonstrates configuring a Coloris instance with a 'polaroid' theme and enabling the 'swatchesOnly' option.
```javascript
Coloris.setInstance('.instance3', {
theme: 'polaroid',
swatchesOnly: true
});
```
--------------------------------
### Install css.gg via npm or yarn
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
Instructions for installing the css.gg package using npm or yarn.
```shell
npm i css.gg
```
```shell
yarn add css.gg
```
--------------------------------
### JavaScript for Installation Form
Source: https://github.com/givanz/vvveb/blob/master/public/install/default/install.html
This JavaScript code handles dynamic form behavior, including password randomization, admin path generation, theme selection, and language management for the Vvveb installation process.
```javascript
let publicPath = '{$this->publicPath}';
function togglePasswordInput(element, id) {
let password = document.getElementById(id);
if (password.type == "password") {
password.type = "text";
//element.innerHTML = "🔓";
element.firstElementChild.className = "icon-eye-outline";
} else {
password.type = "password";
//element.innerHTML = "🔒";
element.firstElementChild.className = "icon-eye-off-outline";
}
}
function randomPassword(length, chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890") {
var pass = "";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
pass += chars.charAt(i);
}
return pass;
}
function randomizePassword() {
document.getElementById("password").value = randomPassword(49);
}
function randomizeAdminPath() {
document.getElementById("admin-path").value = 'vadmin-' + randomPassword(32, "abcdefghijklmnopqrstuvwxyz!@<>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890");
};
randomizePassword();
let isRootPublic = {$this->isRootPublic};
if (isRootPublic) {
randomizeAdminPath();
document.getElementById("not-public-notice").remove();
} else {
document.getElementById("rand-path-btn").remove();
document.getElementById("admin-path").disabled = true;
}
let homepage = document.getElementById("homepage");
let homepageSelect = document.querySelector("\\[name='homepage'\\]");
let themes = document.querySelector(".themes");
function changeTheme(theme) {
fetch(window.location.pathname + "?action=getThemeTemplates&theme=" + theme)
.then((response) => {
if (!response.ok) {
throw new Error(response)
}
return response.json()
})
.then((data) => {
homepageSelect.replaceChildren();
for (code in data) {
let template = code;
let name = data[code];
let el = document.createElement('option');
el.textContent = name;
el.value = template;
homepageSelect.appendChild(el);
}
changeHomepage();
})
.catch(error => {
console.log(error.statusText);
//displayToast("danger", "Error", "Error loading theme templates!");
});
}
function changeHomepage() {
homepage.src = publicPath + "themes/" + document.querySelector('\\[name="theme"\\]:checked').value + "/" + homepageSelect.value;
}
homepageSelect.addEventListener("change", changeHomepage);
themes.addEventListener("change", (e) => {
let element = event.target.closest("input");
if (element) {
changeTheme(element.value);
}
});
function iframeLoad(e) {
homepage.contentWindow.document.body.style.userSelect = "none";
homepage.contentWindow.document.body.addEventListener("click", (e) => {
e.stopPropagation();
e.preventDefault();
return false;
});
}
homepage.addEventListener("load", iframeLoad);
changeHomepage();
function addLanguage() {
let languages = document.querySelectorAll('.language-row');
let languageTemplate = languages[0];
let newLanguage = languageTemplate.cloneNode(true);
newLanguage.classList.remove("d-none");
languages[languages.length - 1].after(newLanguage);
}
function removeLanguage(element) {
let language = element.closest('.language-row');
language.remove();
}
```
--------------------------------
### Additional Attributes Example
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/eva-icons/README.md
Example showing how to use additional data attributes to customize icon color, height, and width.
```html
```
--------------------------------
### Default Coloris Configuration
Source: https://github.com/givanz/vvveb/blob/master/public/js/libs/coloris/examples.html
This snippet shows the default configuration for Coloris, including setting the target element and providing a list of swatches.
```javascript
Coloris({
el: '.coloris',
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'#f4a261',
'#e76f51',
'#d62828',
'#023e8a',
'#0077b6',
'#0096c7',
'#00b4d8',
'#48cae4'
]
});
```
--------------------------------
### Example HTML with SVG Sprite
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
Example of using an SVG sprite in an HTML document.
```html
Document
```
--------------------------------
### All CSS Icons
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
Example of importing and using all CSS icons.
```javascript
import React from 'react';
// Import function from package
import { CSS } from 'css.gg'
function App() {
return (
);
}
export default App;
```
--------------------------------
### Install Feather Icons (Client-side JavaScript)
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/feather/README.md
Install Feather Icons using npm for client-side JavaScript usage.
```shell
npm install feather-icons --save
```
--------------------------------
### Using Icons with Foundation
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/open-iconic/README.md
Example of using an icon with Foundation integration, utilizing the 'fi' class and icon name.
```html
```
--------------------------------
### FontForge Path Configuration
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/tabler-icons/README.md
Example of setting the path to the FontForge executable in compile-options.json.
```json
{
"fontForge":"/Applications/FontForge.app/Contents/MacOS/FontForge"
}
```
--------------------------------
### Clone the Git repository
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/ikonate/README.md
You can clone this repository to manually install Ikonate in your project.
```bash
git clone https://github.com/eucalyptuss/ikonate.git
```
--------------------------------
### Import the module
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/boxicons/README.md
Import the boxicons module after installation.
```javascript
import 'boxicons';
```
--------------------------------
### Installation Script
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/ionicons/readme.md
This script enables Ionicons without needing the Ionic Framework. Place it near the end of your page, right before the closing
tag.
```html
```
--------------------------------
### Using Icons Standalone
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/open-iconic/README.md
Example of using an icon with the default Open Iconic integration, using the 'oi' class and 'data-glyph' attribute.
```html
```
--------------------------------
### Example - Inline SVG Sprite/Symbol
Source: https://github.com/givanz/vvveb/blob/master/public/resources/svg/icons/css.gg/README.md
How to define and use inline SVG symbols for icons.
```html