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

svg-translator

v1.0.0

Published

1. 无用属性删除比如data-name 2. id,class重命名、中文转英文,避免重复和符合命名规范id替换规则 - 如果id中包含filter/linear字样不删除 - 如果id在文件中出现两次不删除 - 其余情况都删除

Downloads

4

Readme

svg文件解析器

  1. 无用属性删除比如data-name

  2. id,class重命名、中文转英文,避免重复和符合命名规范id替换规则

    • 如果id中包含filter/linear字样不删除
    • 如果id在文件中出现两次不删除
    • 其余情况都删除
  3. linearGradient,filter绝对定位改为相对定位,方便使用

    • filter处理规则
      • 将x,y,width,height,修改为百分比
      • 添加primitiveUnits="objectBoundingBox",删除filterUnits="userSpaceOnUse"
      • 子元素feImage的x,y,width,height也要改成百分比
      • 重复的filter删除
    • linearGradient处理规则
      • 将x1,y1,x2,y2修改为百分比
      • 删除gradientUnits="userSpaceOnUse"
      • xlink:href如果包含这个的渐变要删除
  4. 图片base64保存为图片文件,方便阅读

  5. svg path路径转换,转为相对路径,方便修改

开发svg文件解析指令

  1. 在package.json中配置指令的入口,一般指令执行文件命名为cli.js
"bin": {
    "svg-cli": "./bin/cli.js" // 指令名称:指令执行文件路径
  }
  1. 在执行文件中头部添加 #!/usr/bin/env node表示执行环境时node
#!/usr/bin/env node 
  1. 在执行文件中使用commander库可以快速解析终端输入的参数参考文档
const program = require('commander');

program.version('1.0.0')
    .command('parse <path>')
    .action((path) => {
        // 输入该子指令时需要做什么
    });

program.parse(process.argv);