Skip to content

Latest commit

 

History

History
103 lines (75 loc) · 3.07 KB

README.zh.md

File metadata and controls

103 lines (75 loc) · 3.07 KB

IconSpace Icons

Pure SVG Icons for IconSpace

介绍

新特性

  • 提供超过 2000 图标
  • 支持 4 种主题:
    • 线性
    • 填充
    • 双色
    • 四色

更多图标

请访问IconSpace, 提供更多便捷的操作：

  • 复制 SVG 源文件
  • 复制 React 图标组件
  • 复制 Vue 图标组件
  • 下载 PNG
  • 下载 SVG

快速上手

安装

npm install @icon-space/svg --save

引用图标

引用@icon-space/svg，并渲染函数对应的图标:

import {Home} from '@icon-space/svg';

// examples

const svg = Home({theme: 'outline'});

console.log(svg);

全局

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

import { setConfig } from '@icon-space/svg'

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": "@icon-space/svg",
                "libraryDirectory": "es/icons",
                "camel2DashComponentName": false
            }
        ]
    ]
}

将 IconSpace 嵌入到你的项目中

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

属性

属性名称 介绍 类型 默认值 注释
theme 图标主题 'outline' | 'filled' | 'two-tone' | 'multi-color' 'outline'
size 图标的大小，宽高相同 number | string '1em'
spin 给图标加旋转效果 boolean false
fill 图标的颜色，不超过 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