vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.47k stars 1.86k forks source link

feat(theme-default): Add icons on action buttons #3795

Open 0xlau opened 4 weeks ago

0xlau commented 4 weeks ago

close #3783

Usages

actions:
    - theme: brand
      text: lorem ipsum
      link: https://test.com
      startIcon:
          src: /test.svg
          alt: test
          width: 18
          height: 18

or

actions:
    - theme: brand
      text: lorem ipsum
      link: https://test.com
      endIcon: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"/></svg>

About Docs

interface HeroAction {

  // .....

  // Show the left icon on action button.
  startIcon?: ActionIcon

  // Show the right icon on action button.
  endIcon?: ActionIcon
}

type ActionIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
      alt?: string
      width?: string
      height: string
    }

ScreenShot

image