npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@varlet/icons-library-starter

v0.0.9

Published

A icons library starter

Downloads

52

Readme

English | 中文

介绍

一个构建图标库的启动模板。

特性

  • 📦 支持 svg 转换为 vue3、react 组件和 esm、cjs 模块
  • 📦 支持 svg 转换为 web 字体
  • 📦 支持图标预览站点
  • 📦 支持从 figma 设计文件中获取所有 svg 文件
  • 📦 提供发布相关工具,支持 npm、github 发布和变更日志生成

预览站点

https://varletjs.github.io/varlet-icons-library-starter

图标使用

字体图标

import '<packageName>/svg-fonts/css/i-icons.css'
<i class="i i-account-circle-outline"></i>
<i class="i i-account-circle-outline" style="color: red; font-size: 30px"></i>

Vue 组件

<script setup>
import { XIcon, AccountCircleOutline } from '<packageName>'
</script>

<template>
  <x-icon>
    <account-circle-outline />
  </x-icon>
   
  <x-icon color="red" :size="30">
    <account-circle-outline />
  </x-icon>
</template>

React 组件

import { XIcon, AccountCircleOutline } from '<packageName>'

function Demo() {
  return <>
    <XIcon>
      <AccountCircleOutline />
    </XIcon>
   
    <XIcon color="red" size={30}>
      <AccountCircleOutline />
    </XIcon>
  </>
}

框架支持

我们支持 Vue3 和 React,默认将组件编译为 Vue3。如果要生成 React 组件,请参考以下配置。

// vi.config.ts
import { defineConfig } from '@varlet/icon-builder'

export default defineConfig({
  name: 'i-icons',
  namespace: 'i',
  fontFamilyClassName: 'i',
  output: './svg-fonts'
+ generate: {
+   framework: 'react'
+ }  
})

从 figma 文档获取 svg 图标

我们支持从 figma 文档中获取 svg 图标,具体实现步骤如下

步骤一

创建一个 figma 文档,将 svg 图标库的页面名称设置为 Icons,并获取到文件 id。

步骤二

获取 figma 文档的访问 token。

见这里

步骤三

设置 token 和 file id 到脚本中。(为了 token 的安全性,更推荐将 token 设置到 ci 环境变量中)。

// package.json
"scripts": {
- "icons:figma": "VI_FIGMA_TOKEN=123456 vi figma -f 123456",
+ "icons:figma": "VI_FIGMA_TOKEN=<token> vi figma -f <fileId>",
}

核心命令

启动图标预览站点开发环境

pnpm dev

构建图标预览站点

pnpm build

启动图标预览站点预览模式

pnpm preview

构建图标 web 字体

pnpm icons:build

生成图标组件和 esm、cjs 模块

pnpm icons:generate

从 figma 文件获取所有 svg 文件

pnpm icons:figma

发布图标库

pnpm release

配置相关

见这里

反馈和交流

我们推荐使用 issue 列表进行最直接有效的反馈,也可以下面的方式

  • 微信

感谢贡献者们做出的努力

感谢以下赞助者

赞助本项目

赞助本项目,支持我们更好的创作。推荐使用爱发电进行订阅,您的头像将出现在本项目中。

爱发电

https://afdian.net/a/haoziqaq

微信 / 支付宝