Sketch-Icons 项目使用教程

Sketch-Icons 项目使用教程

Sketch-Icons 🚀 Generate a dynamic icon library 项目地址: https://gitcode.com/gh_mirrors/sk/Sketch-Icons

1. 项目的目录结构及介绍

Sketch-Icons/
├── sketchplugin/
│   ├── Contents/
│   │   ├── images/
│   │   ├── resources/
│   │   └── src/
│   ├── appcast.xml
│   ├── .babelrc
│   ├── .gitignore
│   ├── LICENSE
│   ├── README.md
│   ├── Sketch-Icons.sketchplugin.zip
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.skpm.config.js
└── README.md

目录结构介绍

• sketchplugin/: 项目的主要代码目录。
  • Contents/: 包含项目的核心文件，如图像、资源和源代码。
    • images/: 存放项目所需的图像文件。
    • resources/: 存放项目所需的资源文件。
    • src/: 存放项目的源代码文件。
  • appcast.xml: 更新插件的配置文件。
  • .babelrc: Babel 配置文件，用于转换 JavaScript 代码。
  • .gitignore: Git 忽略文件配置。
  • LICENSE: 项目的开源许可证文件。
  • README.md: 项目的说明文档。
  • Sketch-Icons.sketchplugin.zip: 项目的 Sketch 插件压缩包。
  • package-lock.json: 锁定项目依赖版本的文件。
  • package.json: 项目的依赖管理文件。
  • webpack.skpm.config.js: Webpack 配置文件，用于打包项目。

2. 项目的启动文件介绍

项目的启动文件主要是 Sketch-Icons.sketchplugin.zip，这是一个 Sketch 插件的压缩包。用户需要下载并解压该文件，然后在 Sketch 中安装该插件。

安装步骤

1. 下载 Sketch-Icons.sketchplugin.zip 文件。
2. 解压该文件，得到 Sketch-Icons.sketchplugin 文件夹。
3. 打开 Sketch 软件。
4. 将 Sketch-Icons.sketchplugin 文件夹拖放到 Sketch 的插件目录中，或者通过 Sketch Runner 安装。

3. 项目的配置文件介绍

3.1 package.json

package.json 文件是项目的依赖管理文件，包含了项目的元数据和依赖项。

{
  "name": "sketch-icons",
  "version": "1.0.0",
  "description": "A Sketch plugin that allows you to import a set of icons and automatically apply a color style",
  "main": "src/index.js",
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "sketch-module-web-view": "^3.0.0"
  },
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

3.2 webpack.skpm.config.js

webpack.skpm.config.js 是 Webpack 的配置文件，用于打包项目的源代码。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'sketchplugin/Contents/Sketch'),
    filename: 'sketch-icons.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

3.3 .babelrc

.babelrc 是 Babel 的配置文件，用于转换 JavaScript 代码。

{
  "presets": ["@babel/preset-env"]
}

通过以上配置文件，开发者可以管理和打包项目的源代码，确保插件的正常运行。

Sketch-Icons 🚀 Generate a dynamic icon library 项目地址: https://gitcode.com/gh_mirrors/sk/Sketch-Icons