slidev theme light icons

A light and Elegant theme for Slidev

lightvue
49
32
Vue

slidev-theme-light-icons

NPM version

  • A light and Elegant theme for Slidev.
  • This theme contains collection of amazing & light-weighted icons called the light-icons.

Live demo: Click Here.

For more information about light-icons. Visit Light Icons.

100% Light & Dark Compatible

All themes are compatible with light & dark mode

image-header-intro

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: light-icons
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Intro intro

Usage:

---
layout: intro
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
---

intro

Intro with icon image-header-intro

Usage:

---
layout: image-header-intro
imageHeader: '../assets/images/light-icon-logo.svg'
imageRight: '../assets/images/light-icons-landing.svg'
---

image-header-intro

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: true
left: false
---

dynamic-image

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image 
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: false
left: false
---

dynamic-image

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image 
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: false
left: true
---

dynamic-image

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image 
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: true
left: false
---

dynamic-image

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image 
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
upperImage: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: true
left: false
---

dynamic-image

Image at center dynamic-image

Usage:

---
layout: center-image
image: '../assets/images/light-icons-landing2.png'
---

center-image

Dynamic Image dynamic-image

Usage:

---
layout: dynamic-image
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
equal: false
left: false
---

dynamic-image

Image at left left-image

Usage:

---
layout: left-image
image: '../assets/images/light-vue-landing.svg'
equal: true
---

image-left

Image at center dynamic-image

Usage:

---
layout: center-image
---

center-image

Components

This theme provides the following components:

LightIcon & IconBox

  • For using light-icons wherever needed inside the theme.
  • Also packed with additional IconBox to make the icons look elegant.

dynamic-image

Contributing

  • npm install
  • npm run dev to start theme preview of example.md
  • Edit the example.md and style to see the changes
  • npm run export to genreate the preview PDF
  • npm run screenshot to genrate the preview PNG