https://github.com/hairyf/vite-plugin-fonts-admin

Manage Vite project font icons.
https://github.com/hairyf/vite-plugin-fonts-admin

Last synced: 27 days ago
JSON representation

Manage Vite project font icons.

• Host: GitHub
• URL: https://github.com/hairyf/vite-plugin-fonts-admin
• Owner: hairyf
• License: mit
• Created: 2021-06-30T12:09:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-12-15T11:49:35.000Z (about 1 year ago)
• Last Synced: 2024-11-17T02:08:52.197Z (about 2 months ago)
• Language: Vue
• Size: 2.18 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vite Fonts Administration Plugin

[![img](https://img.shields.io/github/issues/TuiMao233/vite-plugin-fonts-admin.svg)](https://github.com/TuiMao233/vite-plugin-fonts-admin/issues)

[![img](https://img.shields.io/github/forks/TuiMao233/vite-plugin-fonts-admin.svg)](https://github.com/TuiMao233/vite-plugin-fonts-admin/network/members)

[![img](https://img.shields.io/github/stars/TuiMao233/vite-plugin-fonts-admin.svg)](https://github.com/TuiMao233/vite-plugin-fonts-admin/stargazers)

[![NPM version](https://img.shields.io/npm/v/vite-plugin-fonts-admin.svg)](https://www.npmjs.com/package/vite-plugin-fonts-admin)

Manage fonts in Vite projects.

[中文文档](https://github.com/TuiMao233/vite-plugin-fonts-admin/blob/main/README_CN.md)

![view](images/view.png)

### Icon Font Created By svgtofont

[svgtofont](https://github.com/jaywcjlove/svgtofont#readme) Svg generate Fonts

[archiver](https://github.com/archiverjs/node-archiver) Files compress Zip

## Vite Plugin Use

~~~typescript

import { defineConfig } from 'vite'

import { ViteFontsAdmin } from 'vite-plugin-fonts-admin'

export default defineConfig({

  plugins: [

    ViteFontsAdmin()

  ]

})

~~~

## Vue Use

~~~html

  


import { defineComponent } from 'vue'

import option from './index.json'

export default defineComponent({

  props: {

    type: {

      type: String as () => keyof typeof option,

      required: true

    },

  },

  setup: (props) => {

    const svgTag = option[props.type]

    return {svgTag}

  }

})

~~~

## Visit Fonts Administration

~~~sh

# visit url: Local/fonts

vite v2.3.8 dev server running at:

 > Local: http://localhost:3000/

 > Network: use `--host` to expose

# http://localhost:3000/ >>> http://localhost:3000/fonts

~~~

## Generate dir

~~~sh

# svg > index.json > fonts/...

src

- index.json # option

- fonts # css | ttf | woff | woff2 | svg

~~~

## Option

~~~js

ViteFontsAdmin({

  // Generate font path, default 'src/VFonts'

  dir: 'src/VFonts',

  // Generate font name, default 'iconfont'

  fontName: 'iconfont',

  // Generate css class prefix, default fontName

  classNamePrefix: 'iconfont',

  // Whether to generate css entrance

  css: true,

  // Whether to generate base64 css entrance

  base64: true

})

~~~

## Alone deploy

~~~sh

clone https://github.com/TuiMao233/vite-plugin-fonts-admin.git

# add node_modules

yarn

# run server

npm run serve

~~~

## License

Licensed under the [MIT License](https://opensource.org/licenses/MIT).