teleren/devto huggingface dataset:
Rustで自作OS 3日目
Tags: rust
Published: 2021-07-04 09:39:19

"第2章 EDK II入門とメモリマップ"を進めていく。
自作OS本を読んだところ、USBブートするためにBoot Loaderを作っていくようで、昨日までで作ったUEFIアプリをEDK IIで書き直すらしい。
昨日出てきたOVMFはUEFI BIOSのOSS実装で、EDK IIはUEFI BIOS上で動くアプリだけでなく、UEFI BIOS自体を開発するためにも使われるとのこと。

Rustで書くときにどうすれば良いのか調べたが、いまいちピンとこない。そもそもUEFIとEDK IIがよく分かってない。
- [uefi crate](https://github.com/rust-osdev/uefi-rs)を使った昨日時点で`.efi`出力が得られている。
- [Enabling Rust for UEFI Firmware - Webinar](https://youtu.be/dCu0-frSURE)
- [rust-osdev/bootloader](https://github.com/rust-osdev/bootloader)

[osdev-jp](https://osdev-jp.readthedocs.io/ja/latest/2017/create-uefi-app-with-edk2.html)を見ると、

> スタンドアロンの UEFI アプリは UEFI Shell が起動する前に起動することができます。OS のブートローダーを作る場合などはスタンドアロンとして構成します。

> スタンドアロンの UEFI アプリのエントリポイントは一般的な C 言語プログラムと違い、EFI_HANDLE と EFI_SYSTEM_TABLE * を引数として受け取ります。

ということは、昨日までのuefi crateを使ったUEFIアプリはこの特徴を満たしているのでは？なんなら使用可能メモリを表示する過程でメモリマップを取得しているのでは？

```rust
#![no_std]
#![no_main]
#![feature(asm)]
#![feature(abi_efiapi)]
#![feature(alloc)]

extern crate uefi;
extern crate uefi_services;
extern crate rlibc;
extern crate alloc;
extern crate log;

use uefi::prelude::*;
use crate::alloc::vec::Vec;
use uefi::table::boot::MemoryType;
use log::info;

const EFI_PAGE_SIZE: u64 = 0x1000;

#[entry]
fn uefi_start(_image_handler: uefi::Handle, system_table: SystemTable<Boot>) -> Status {
    uefi_services::init(&system_table).expect_success("Failed to initialize utils");
    system_table
        .stdout()
        .reset(false)
        .expect_success("Failed to reset output buffer");
    {
        let rev = system_table.uefi_revision();
        let (major, minor) = (rev.major(), rev.minor());
        info!("UEFI {}.{}", major, minor);
        memory_map(&system_table.boot_services());
    }
    loop{};
    Status::SUCCESS;
}

fn memory_map(bt: &BootServices) {
    let map_size = bt.memory_map_size();
    let mut buffer = Vec::with_capacity(map_size);
    unsafe {
        buffer.set_len(map_size);
    }

    let (_k, desc_iter) = bt
        .memory_map(&mut buffer)
        .expect_success("Failed to retrieve UEFI memory map");

    let descriptors = desc_iter.copied().collect::<Vec<_>>();

    assert!(!descriptors.is_empty(), "Memory map is empty");

    info!("efi: usable memory ranges ({} total)", descriptors.len());
    descriptors
        .iter()
        .for_each(|descriptor| match descriptor.ty {
            MemoryType::CONVENTIONAL => {
                let size = descriptor.page_count * EFI_PAGE_SIZE;
                let end_address = descriptor.phys_start + size;
                info!(
                    "> {:#x} - {:#x} ({} KiB)",
                    descriptor.phys_start, end_address, size
                );
            }
            _ => {}
        })
}
```
適当に写経してたから`uefi::table::boot`とか使ってるのに気づかなかった。
この構成でブートローダーとして機能するかはわからないので、とりあえず本を読み進める。
[元になったブログ](https://gil0mendes.io/blog/an-efi-app-a-bit-rusty/#the-app-itself)でもメモリマップ取得までやってたので、UEFIアプリのHello Worldは画面表示だけでなくメモリマップまでなのかもしれない。
ちなみに自作OS本ではメモリマップをファイルに保存するUEFIアプリを作ってた。

EDK IIを使ってるかは分からないが、今回の場合はueif crateを使ってboot loaderを作れればそれで良さそう。
Blood Donation App With Android Studio
Tags: android, firebase, codenewbie, java
Published: 2021-07-04 09:35:50

Hello everyone, I have created a blood donation app with android studio and firebase, that has the following functionalities:
1. Registration of users as either donor or recipient
2. Login registered users and show different UI on Main screen depending on if they are registered as either donor or recipient
3. Saving and retrieving user data and actions from firebase database.
4. Sending emails directly from an android app without requiring intents of use of the Gmail app.
5. Notifications module.
6. App displays Animations on the splash screen.
7. App offers easy navigation and beautiful UI.

I have created YouTube videos where I direct coders on how to make this app, you can find the videos here https://youtu.be/i-Gczh0SN1o
Resep Ayam Goreng Tepung dengan Kulit Gurih, Gampang Membuat
Published: 2021-07-04 09:19:06

Siapakah yang tidak sukai ayam goreng tepung? Makanan ini memberinya kenyamanan karena rasanya yang sedap. Makanan ini dapat menjadi salah satunya opsi untuk bergabung dengan keluarga diakhir minggu.

Walau Anda dapat pesan ayam goreng secara cepat di restaurant cepat sajian, tetapi membuat sendiri dapat menjadi lebih nikmat. Memang tidak gampang membuat susunan kulitnya yang gurih prima, tetapi Anda dapat coba cara ini.

Berikut resep lima cara membuat ayam goreng rumahan yang gurih.

Bahan:
-500 gr ayam potong
-2 cangkir tepung lembut
-2 cangkir buttermilk
-1 sdt cabe merah bubuk
-1 sdt lada hitam bubuk
-garam seperlunya


Langkah membuat:
1. Mengambil 2 cangkir tepung lembut dan campur dengan 1 sdt cabe merah, 1 sendok teh bubuk lada hitam, dan garam seperlunya.

2. Seterusnya, mengambil 500 g ayam dan potong kecil-kecil. Celup potongan-potongan ini ke 2 cangkir buttermilk dituruti dengan melapisnya dengan kombinasi tepung yang telah dipersiapkan.

3. Panasi minyak goreng dalam wajan. Sesudah minyak cukup panas, mulai masukkan potongan ayam. Goreng ayam dari tiap segi sepanjang waktu yang cukup.

4. Goreng sepanjang 1/2 jam untuk pastikan potongan ayam cukup gurih. Tunggu hingga potongan ayam jadi cokelat. Yakinkan tidak untuk mengolah ayam kelamaan untuk memperoleh kerak yang gurih.

5. Tempatkan ayam goreng di atas tisu untuk mempernyerap minyak berlebihan. Kerjakan hal sama dengan tersisa potongan ayam dan suguhkan panas.

Ayam goreng gurih siap disajikan plus tambahan sauce sesuai dengan selera.

source: https://www.masakankita.me/
Vapor 4 + Inertia + Svelte + Laravel Mix
Tags: swift, vapor, svelte, laravel
Published: 2021-07-04 09:09:12

---
title: Vapor 4 + Inertia + Svelte + Laravel Mix
published: true
description: An example project
tags: swift, vapor, svelte, laravel
cover_image: https://user-images.githubusercontent.com/292738/124379293-233e2080-dc84-11eb-801d-8268aaf29685.png
---

Wondering how can you implement Svelte and Inertia in your favourite Swift backend framework?

This is an example project so you can use the latest and greatest technologies today :)

{% github ninjascl/vapor-inertia-svelte-example %}
go กับ google drive
Tags: go, googlecloud, googleapis
Published: 2021-07-04 08:57:36

ทดลองเขียน Go ต่อไปที่ google drive เพื่อวางไฟล์

สิ่งที่ต้องเตรียม

1. Google Account ซึ่งจะใช้ของส่วนตัวมาทดลองดูก็ได้
2. Google Cloud ก็ใช้ account เดียวกับข้อ 1.
3. ติดตั้ง Go ในเครื่องให้เรียบร้อย

เตรียม folder ใน google drive
- New Folder แล้วตั้งชื่อ
- แชร์ Folder นี้ออกมาแบบ public ไปเลย เพื่อทดลอง อย่าเอาไปทำจริงล่ะ
- จด id ที่ แชร์ออกมา มันจะอยู่ใน url

สร้าง Service Account

ไปที่ Google Console
ไปที่เมนู APIs & Services
ถ้ายังไม่มี Project ก็สร้างเลย
กด Enable APIS AND SERVICES
ค้นหาด้วยคำว่า sheets จะเจอ Google Sheets API กดเข้าไปเลย
ไปสร้าง Service Account แล้ว Download json file

เขียนโค้ดสิครับ รออะไร

```go
package main

import (
	"io/ioutil"
	"log"
	"os"

	"golang.org/x/oauth2"
	"golang.org/x/oauth2/google"
	drive "google.golang.org/api/drive/v3"
)

func main() {
	// ctx := context.Background()
	b, err := ioutil.ReadFile("./ไฟล์ที่donwloadมา.json")
	if err != nil {
		log.Fatalf("Unable to read client secret file: %v", err)
	}

	config, err := google.JWTConfigFromJSON(b, drive.DriveScope)
	if err != nil {
		log.Fatalf("Unable to parse client secret file to config: %v", err)
	}
	client := config.Client(oauth2.NoContext)

	service, err := drive.New(client)
	if err != nil {
		log.Fatalf("Unable to create Drive service: %v", err)
	}

	filename := "go.mod"

	goFile, err := os.Open(filename)
	if err != nil {
		log.Fatalf("error opening %q: %v", filename, err)
	}
	driveFile, err := service.Files.Create(&drive.File{
		Name:     filename,
		Parents:  []string{"idที่share_folderมา"},
		MimeType: "application/octet-stream",
	}).Media(goFile).Do()
	log.Printf("Got drive.File, err: %#v, %v", driveFile, err)
}

```

ในที่นี้ผม upload `go.mod` ขึ้นไปโง่ๆเลย และก็อีกเช่นเคย ไม่ได้ capture รูปให้ดู ขออภัยด้วยครับ
go กับ google sheets
Tags: googlecloud, go, googlesheet
Published: 2021-07-04 08:34:21

การเขียน Go เพื่อไปอ่านหรือเขียนใน Google Sheets ต้องทำอะไรบ้าง

วันที่ทดลองใช้ go version 1.16.5

สิ่งที่ต้องเตรียม
1. Google Account ซึ่งจะใช้ของส่วนตัวมาทดลองดูก็ได้
2. Google Cloud ก็ใช้ account เดียวกับข้อ 1.
3. ติดตั้ง Go ในเครื่องให้เรียบร้อย

เตรียม Google Sheet
- สร้างไฟล์ใน Google Sheet ไว้ 1 file ตั้งชื่อให้เรียบร้อย
- ตั้งชื่อ Sheet ไว้สักหน่อย เช่น Sheet1 เป็นต้น
- จะเพิ่มข้อมูลไว้เล่นๆดูสักหน่อยก็แล้วแต่เลย
- กด Share เอาแบบ public ไปเลย

สร้าง Service Account
- ไปที่ Google Console
- ไปที่เมนู `APIs & Services`
- ถ้ายังไม่มี Project ก็สร้างเลย
- กด Enable APIS AND SERVICES
- ค้นหาด้วยคำว่า `sheets` จะเจอ `Google Sheets API` กดเข้าไปเลย
- ไปสร้าง Service Account แล้ว Download json file

เขียนโค้ดสิครับ รออะไร

```go
package main

import (
	"context"
	"fmt"
	"io/ioutil"
	"log"

	"golang.org/x/oauth2"
	"golang.org/x/oauth2/google"
	"google.golang.org/api/option"
	"google.golang.org/api/sheets/v4"
)

func main() {
	ctx := context.Background()
	b, err := ioutil.ReadFile("./ไฟล์ที่donwloadมา.json")
	if err != nil {
		log.Fatalf("Unable to read client secret file: %v", err)
	}

	config, err := google.JWTConfigFromJSON(b, "https://www.googleapis.com/auth/spreadsheets")
	if err != nil {
		log.Fatalf("Unable to parse client secret file to config: %v", err)
	}
	client := config.Client(oauth2.NoContext)

	srv, err := sheets.NewService(ctx, option.WithHTTPClient(client))
	if err != nil {
		log.Fatalf("Unable to retrieve Sheets client: %v", err)
	}

	spreadsheetId := "idที่shareเอกสารมา"
	readRange := "A1:E1"
	resp, err := srv.Spreadsheets.Values.Get(spreadsheetId, readRange).Do()
	if err != nil {
		log.Fatalf("Unable to retrieve data from sheet: %v", err)
	}

	if len(resp.Values) == 0 {
		fmt.Println("No data found.")
	} else {
		fmt.Println("Name, Major:")
		for _, row := range resp.Values {
			fmt.Printf("%s, %s\n", row[0], row[4])
		}
	}

	rb := &sheets.ValueRange{
		MajorDimension: "ROWS",
		Values: [][]interface{}{
			{"AAAA"},
		},
	}

	_, err = srv.Spreadsheets.Values.Append(spreadsheetId, "Sheet1!A2:A2", rb).ValueInputOption("USER_ENTERED").Do()
	if err != nil {
		log.Fatalf("Unable to append data to sheet: %v", err)
	}
}

```

ไม่ได้ capture รูปให้ดูนะครับ ขออภัย คิดว่ากดๆตาม ในช่วงเวลาเดียวกัน น่าจะไม่ยากมากครับ
How to use angular-cli without global installation
Tags: angular, npm
Published: 2021-07-04 08:32:44

I'm a developer using mostly angular.js. My angular2+ experience is mostly some studying or courses from time to time. Therefore - I'm not using angular-cli on a daily basis, and I seems to upgrade node & npm more often I generate a new angular2+ project.

[The official doc](https://angular.io/guide/setup-local), tells me to do as follow:

```
$ npm install -g @angular/cli
$ ng new my-project
```

I'm a bit bothered by this, because:
1. I'm not going to use that much before switching to the newer npm version
2. I don't want to thing about any possible ways global version of angular cli would collide with local versions installed in projects

Besides, I really like the light-weight approach frameworks like Next.js or NuxtJS are allowing you to just start playing with their code generator.

Luckily, there is this alternative way of generating angular project:
```
$ npx -p @angular/cli ng new my-project
```

as you can see it here:
{% asciinema 423773 %}

it does the job:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8etipkf9piitxs32cf5.png)

# Summary
Even though angular documentation seems to assume you have no reason of trying out their framework, unless you it's your job and you need all the tooling all the time (maybe they are right about it); here we have an easier way of running their generator command, without turning our environment into angular-shop.
5 Best Free Platforms To Learn React
Tags: productivity, webdev, javascript, beginners
Published: 2021-07-04 08:25:29

React is a JavaScript library created by Facebook to help developers create modern apps. React handles the view layer and can be used to build online and mobile applications. It works in tandem with other JavaScript frameworks and libraries, and includes components, which are small, reusable parts of code.

Every business wants outstanding user interfaces on their websites and mobile apps since it offers them a competitive advantage and makes users' digital interactions easier.

follow me on [Twitter](https://twitter.com/chetanistaken) & [Github](https://github.com/itschetan)


###**Let's Dive Into The Platforms Now:**



1.**freeCodeCamp**   [Visit Website](https://www.freecodecamp.org/)

freeCodeCamp is a non-profit organisation that has over 6,000 tutorials about technology and programming on their websites and YouTube channels.

Many of the organization's graduates have obtained successful careers as a result of their courses and after graduation.

2.**Coursera**   [Visit Website](https://coursera.com)

Another excellent site is Coursera, which provides specialty degrees, professional courses, and tutorials in React, data science, and programming through partnerships with some of the world's best universities and businesses.

Yes, coursera is paid but it also has many free cources including for react as well as you can get scholarship. 

3.**Coursesity**   [Visit Website](https://coursesity.com/)

Learn web development, applications development, database, data science, machine learning, blockchain, chatbot, and virtual reality with the top free online React programming lessons and courses for programmers and developers.

Coursesity is an online learning platform that lets users to search for online courses, share learning updates, and interact with other people who are interested in similar topics.

4.**Pluralsight**   [Visit Website](https://www.pluralsight.com/)

The Pluralsight platform is another free e-learning platform with thousands of classes created by professional instructors. Anyone with the necessary skills can teach on this platform. One of the courses they provide is React Js.

You'll need a Pluralsight membership for this React course, which costs roughly $29 per month or $299 per year (14 percent  discount).

5.**Reactjs.org**   [Visit Website](https://reactjs.org/)

The official documentation for any programming language or framework is the best source of information because it was produced by the person who created the technology and contains practically no errors. People with little programming knowledge will benefit from learning React from the official website.

![Photo by Ferenc Almasi on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqz9smg4xeqxhu336alo.jpg)

--------END--------

FOLLOW ME ON  [TWITTER.](https://twitter.com/chetanistaken)

*Originally, This was published on **[The Zyox Letter](https://zyox.substack.com)**, The best Newsletter for Programming, tech, entreprenuership & money.*

*CLICK HERE* - https://zyox.substack.com

**Join Now**
C# Exception Handling
Tags: csharp, dotnet, beginners, tutorial
Published: 2021-07-04 07:31:51

Handling errors is an important part of programming which makes the program more user-friendly. In this tutorial, we'll learn about how we can handle exceptions in C#.

## The throw keyword

The `throw` keyword is used to throw errors and stops the further execution of a program.

```csharp

bool authorized = false;
if(authorized)
{
    // Your business logic here
}
else
{
    throw new Exception("Access denied");
}

```
The above program throws an error as -

```bash
Unhandled exception. System.Exception: Access denied
```

The `throw` keyword can be used with many types of exception classes. For example - 

```csharp

if(email == null)
{
    throw new ArgumentNullException("Email cannot be null");
}

```

## try-catch

The `try-catch` statement consist of a `try` block followed by one or more `catch` blocks.

```csharp
try
{
    // Your code blocks
}
catch(Exception ex)
{
    throw new Exception("An error occured - " + ex);
}
```

## try-finally

This statement consist of a `try` block followed by a `finally` block which runs always after the try block.

```csharp
try
{
    // Your code here...
}
finally
{
    // This block will run regardless of the result
}
```


## try-catch-finally

This statement consists of a `try` block followed by one or more `catch` blocks followed by a `finally` block which will run always regardless of the result. This is helpful in cases such as you have to free up the memory even if the program doesn't execute successfully.

```csharp
try
{
    // Your main business logic
}
catch(Exception ex)
{
    throw new Exception("Error!");
}
catch(ArgumentNullException ex)
{
    throw new ArgumentNullException("Arg cannot be null");
}
...
// More catch blocks
...
finally
{
    // It will run regardless of the result
}
```
Get-svg-icons : VS Code Extension 
Published: 2021-07-04 07:29:41

If you are a frontend developer, it's obvious about the time and thoughts you take to fix on a perfect icon for your website. You have to navigate to websites like Flaticon, Font Awesome, Material Icons etc., find suitable icons, download the SVG or copy the font  and finally need to include the corresponding libraries to your code base. Reducing this hassle and the bundle size associated with importing external packages was the main inspiration behind this VS Code extension.

With Get-Svg-Icons extension, you no longer have to navigate to other websites to choose your icon, everything comes handy on VS code itself. A side panel with customizable icons and the inline icon suggestions on vscode editor makes the process easy and thus increase productivity of developers.  

## Features
### Side Panel with customizable icons

- Side Panel with around 1300+ icons
- Users can search for the icon-name (or tags associated with it) and choose the desired icon
- On clicking on the icon, corresponding svg code will be inserted at the last active position on the code editor
- Users can change the height and width of the svg directly from the side panel

![demo](https://raw.githubusercontent.com/Open-Sourced-Olaf/Get-svg-icons/staging/screenshots/side-panel.gif)


### Inline Icon suggestions

- Type "icon-" (without quotes) to start auto-completing icons. If the icon preview is not showing up (as shown in the GIF below), press Ctrl+Space (default hotkey) or press the  ">" icon to expand the details view.
- An inline replacement of the selected icon with its svg will be done.

![demo](https://raw.githubusercontent.com/Open-Sourced-Olaf/Get-svg-icons/staging/screenshots/inline_icon_completion.gif)

### Icon preview on hover
- On hovering over the svg code (class name) , you can preview the icon of the corresponding svg snippet


Get the extension [here](https://marketplace.visualstudio.com/items?itemName=marcochan.get-svg-icons)
Want to contribute? Head over to the  [Github Repository](https://github.com/Open-Sourced-Olaf/Get-svg-icons)
How to try a Linux flavor
Tags: ubuntu, linux, installation, experiment
Published: 2021-07-04 07:12:10

Whether one is aware or not, nobody's life is untouched by Linux os. We use it in one way or the other. The super power of Linux is that, it reigns from large Super computers to the tiny compuiting machines like Raspberry pi and IOT devices.

Lets talk about, if you want to experience a flavor of linux, what are the different ways to do so.

## Using docker
This might seem very odd, but of course, docker will let you experience the CLI version for a linux, say Fedora / Ubuntu / Debian / Alpine. You can use these OS images to build your application. Or just experience it in the CLI.


## Using the cloud service providers
Similar to docker, you can launch OS instance in environment provided by the cloud service providers such as AWS, GCP, MS Azure etc. Here also, you get access to the OS via the CLI only.


## Using virtual machine
You can use Oracle Virtual Box to install just any flavor of linux, as long as you can download the ISO on your local machine. The installation process is similar to installing the OS on a real machine. You can have the full GUI experience.


## Installing on flash drive
You can burn the Linux OS ISO on a flash drive just to have a first hand experience, before you actually put on a machine that you use for daily tasks. Once you have the flash drive ready, put it into a machine (laptop / desktop) and during the boot process, choose the flash drive as boot device. A very common challenge with this process is that if you want to try multiple flavors, then you need to go through the tiring process of installing each flavor separately and then experience it. But nothing much to worry, we have solutions which let us put multilple flavors of linux on single flash drive. And then at the time of boot, you can choose, what OS do you want to boot with. 
See [Link 1](https://www.linuxbabe.com/apps/create-multiboot-usb-linux-windows-iso) or [Link 2](https://www.funkyspacemonkey.com/how-to-create-a-multi-iso-bootable-flash-drive)


## Installing on the real machine
If you are happy with a Linux, that you tried from the flash drive, you may choose to install it on your machine machine as well. The same flash drive can be used to install the linux on your desktop / laptop. The setup process of most modern linux are fairly simple and fast.


## Try it online
Yes, you can experience a Linux OS online, via [Distrotest.net](https://distrotest.net/index.php). Surprisingly, they have a huge list of Linux OS that you can use. And, you get to see the GUI with this. But note that, the speed might vary depending upon the bandwidth of your network. Since this is a free service, therefore the OS is intialized with limited amount of resources. The default sesion time is 30 minutes and can be extended by 15 minutes.
How to host discord bot 24/7 on replit 2022 | cwkhan
Tags: replit, discord, javascript, hosting
Published: 2021-07-04 06:49:00

Want host discord.js bot replit 24/7 ?

**1 Go to ur project**


**2 Go to ur project main file**


**3 put these code in your main file**


```javascript
require('http').createServer((req, res) => res.end('Bot is alive!')).listen(3000)
```
Now u can see website icon on replit

**4 now copy ur website url**

5 go to these websites[apptime](https://apptime.eu.org) 

**How to Use**
Learn how to create your new monitor in just 2 minutes.

5
**Sign In**
Sign In to Apptime.

6
**Create new Monitor**
Create your new monitor on the Dashboard page.

7
Finish!
Yes, that's all.
 <div align="center"><a href="https://youtu.be/O24Q02LpFl4"> 
    <img src="https://cdn.discordapp.com/attachments/815889753492291595/933629539601489930/unknown.png" alt="Automodbot" />
</a> </div>

8 if u  not understand here is the [totureal](https://youtu.be/O24Q02LpFl4)

 join our [discord server](https://dsc.gg/kmdevs)
oh-vue-icons for Vuejs app
Tags: vue
Published: 2021-07-04 05:43:22

There are few good npm icon packages work with node project and vue as well. When I try font-awesome for my app (vuejs), it didn't work for me.  There is a package solely for vue(Vue2 and Vue3) users,` oh vue icons`.

## Install the package

``` 
yarn add oh-vue-icons
  or
npm install oh-vue-icons

```
## Global import

Let's got to entry point file, usually `main.js` and the following lines
```
import OhVueIcon from "oh-vue-icons";

import { FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress } from "oh-vue-icons/icons";

OhVueIcon.add(FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress);

Vue.component("v-icon", OhVueIcon);
```
In the he 3rd line we imported the individual Icon from `oh-vue-icons`. Visit the icon page and copy the name of the icon by clicking and copy. Then add it to the `main.js` as above.

## v-icon

Using the `v-icon` we can include icons in the template. The component has few important `props` like `name, scale` etc, where `scale` is used to adjust the `size` of the icon. For complete list of props and features `refer` the [GitHub documentation](https://github.com/Renovamen/oh-vue-icons).

```
<v-icon name="fa-wordpress"  scale="1.5"/>
```

Icon set/name we imported has two part (all of them has to be in `lower case` while passing to name prop). The first `two letters` (fa) should be appear before the `hyphen(-)` and the rest come after.