@fe6/icon-img
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

Water Icon 图标

Water 图标体系,项目中有需要 复制图标 时候使用

介绍

新特性

  • 支持 4 种主题:
    • 线性
    • 填充
    • 双色
    • 四色

快速上手

安装

npm install @fe6/icon-img --save

引用图标

引用@fe6/icon-img,并渲染函数对应的图标:

import { IconVideo } from '@fe6/icon-img';

// examples

const svg = IconVideo();

console.log(svg); // svg 的 html 字符串

全局

你可以使用 @fe6/icon-img 中的 setConfig方法来设置全局配置。

import { setConfig } from '@fe6/icon-img';

setConfig({
  theme: 'outline',
  size: '1em',
  strokeWidth: 4,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  outStrokeColor: '#000',
  outFillColor: '#2F88FF',
  innerStrokeColor: '#FFF',
  innerFillColor: '#43CCF8',
});

按需加载

可以使用babel-plugin-import来按需加载图标

配置如下:

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@fe6/icon-img",
        "libraryDirectory": "es/icons",
        "camel2DashComponentName": false
      }
    ]
  ]
}

将 WaterIcon 嵌入到你的项目中

如果你的项目中需要使用到图标名称,作者,分类,标签以及创建时间等额外的信息,你可以使用位于每个 NPM 根目录的icons.json文件。

属性

属性名称 介绍 类型 默认值 版本
theme 图标主题 'outline' | 'filled' | 'two-tone' | 'multi-color' 'outline'
size 图标的大小,宽高相同 number | string '1em'
spin 给图标加旋转效果 boolean false
colors 图标的颜色,不超过 4 个颜色,默认为当前颜色 string | string[] 'currentColor'
strokeLinecap svg 元素的 stroke-linecap 属性 'butt' | 'round' | 'square' 'round'
strokeLinejoin svg 元素的 stroke-linejoin 属性 'miter' | 'round' | 'bevel' 'round'
strokeWidth svg 元素的 stroke-width 属性 number 4
base64 为 true 则返回 base64 字符串 boolean false 0.11.0
type 渲染官方图标的名称 string ''
svg 渲染的 svg 字符串 string '' 0.12.0

Package Sidebar

Install

npm i @fe6/icon-img

Weekly Downloads

18

Version

1.2.2

License

MIT

Unpacked Size

51.3 MB

Total Files

13413

Last publish

Collaborators

  • fe6