svg-icons-建设器

Svg-icons-buildinger是一个角建设者为 svg-to-ts (韩语) 项目。 它可用于将Angular库或SPA内部的SVG图标转换为对象,常数甚至个体TypeScript或JavaScript文件. 找到更多关于官方的消息 svg-to-ts 文档。 。 。 .

使用量

安装

国家预防机制: npm install @angular-extensions/svg-icons-builder

角 CLI : (英语) ng add @angular-extensions/svg-icons-builder

配置构建器

要使用建构器, 您需要添加新条目 architect 对象在您体内 angular.json。 。 。 .

一个有效的 svg- to- ts 配置选项取决于 conversionType 并因此可能有所不同。 表示 convesionType: "files" 将显示不同于配置 conversionType: "constants"每一个 conversionType 拥有自己的建筑师.

在我们的例子中,我们称之为 generate-icons。然后需要指定以下属性:

conversionType: constants

• 构建器数字 : "@angular-extensions/svg-icons-builder:svg-icons-constants-builder"
• 配置数字 : svg- to-ts 常数配置

"generate-icons": {
  "builder": "@angular-extensions/svg-icons-builder:svg-icons-constants-builder",
  "options": {
      "conversionType": "constants",
      "fileName": "myIcons",
      "generateType": false,
      "generateTypeObject": false,
      "generateCompleteIconSet": true,
      "srcFiles": ["./src/icons/*.svg"],
      "outputDirectory": "./dist/icons",
      "interfaceName": "DinosaurIcon",
      "typeName": "dinosaurIcon",
      "prefix": "dinosaurIcon",
      "svgoConfig": {
        "plugins": ["cleanupAttrs"]
      }
  }
}

conversionType: files

• 构建器数字 : "@angular-extensions/svg-icons-builder:svg-icons-files-builder"
• 配置数字 : svg-to-ts 文件配置

  "generate-icons": {
    "builder": "@angular-extensions/svg-icons-builder:svg-icons-files-builder",
    "options": {
      "conversionType": "files",
      "srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"],
      "outputDirectory": "./dist/dinosaur-icons/icons",
      "interfaceName": "DinosaurIcon",
      "generateType": false,
      "generateTypeObject": false,
      "generateCompleteIconSet": false,
      "exportCompleteIconSet": false,
      "fileName": "dinosaur-icons",
      "iconsFolderName": "dinosaur-icons",
      "objectName": "dinosaur-icons",
      "typeName": "dinosaurIcon",
      "prefix": "dinosaurIcon",
      "modelFileName": "dinosaur-icons",
      "barrelFileName": "index",
      "svgoConfig": {
        "plugins": ["cleanupAttrs"]
      },
      "compileSources": true
    }
  }

conversionType: object

• 构建器数字 : "@angular-extensions/svg-icons-builder:svg-icons-object-builder"
• 配置数字 : svg- to-ts 对象配置

  "generate-icons": {
    "builder": "@angular-extensions/svg-icons-builder:svg-icons-object-builder",
    "options": {
      "conversionType": "object",
      "srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"],
      "outputDirectory": "./dist/dinosaur-icons/icons",
      "fileName": "dinosaur-icons",
      "objectName": "dinosaur-icons",
      "svgoConfig": {
        "plugins": ["cleanupAttrs"]
      },
      "compileSources": true
    }
  }

运行构建器

要运行构建器, 您必须在您的 npm 脚本中添加新的 npm 脚本 package.json替换 name-of-your-app 与您的申请名称 .

"genrate-icons": "ng run name-of-your-app:generate-icons"

核心小组

感谢这些伟大的人emoji 密钥:

凯拉·阿尔特佩特尔 💻 🐛 📖 🤔 ⚠️

凯文·克罗伊泽 💻 🐛 📖 🤔 ⚠️

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!