Nuclearly Potent Moonshine

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

    1.2.2 • Public • Published

    Water Icon 图标

    Water 图标体系, vue 项目中使用

    介绍

    新特性

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

    快速上手

    安装

    npm install @fe6/icon-vue --save
    

    引用图标

    在组件的上方引用@fe6/icon-vue,并在组件的模板函数中使用:

    <template>
      <icon-video theme="filled" />
    </template>
    <script>
      import { IconVideo } from '@fe6/icon-vue';
    
      export default {
        components: {
          IconVideo,
        },
      };
    </script>

    如果你不想引用,那么你可以全局安装图标

    import { waterIconInstall } from '@fe6/icon-vue';
    import { createApp } from 'vue';
    
    const app = createApp({});
    
    // Install
    waterIconInstall(app); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-video`.
    waterIconInstall(app, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon,组件名字是`i-video`.
    app.mount('#app');

    Style Sheet

    引用预设样式

    import '@fe6/icon-vue/styles/index.css';

    全局

    你可以使用 @fe6/icon-vue 中的 IconProvider来设置全局配置。

    <template>
      <div>
        <icon-video theme="filled" />
      </div>
    </template>
    
    <script>
      import { DEFAULT_ICON_CONFIGS, IconProvider } from '@fe6/icon-vue';
      import { IconVideo } from '@fe6/icon-vue';
    
      export default {
        components: {
          IconVideo,
        },
        setup() {
          IconProvider({ ...DEFAULT_ICON_CONFIGS, prefix: 'i' });
        },
      };
    </script>

    按需加载

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

    配置如下:

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

    使用 Icon 组件

    我们更推荐使用按需加载的方式来加载图标,因为这样可以大幅度缩减编译后代码体积, 但是在有些类似远程加载的菜单的场景下,直接引用全部图标可以缩减开发成本。

    使用方式:

    <template>
      <water-icon type="IconVideo" theme="filled" />
    </template>
    <script>
      import { WaterIcon } from '@fe6/icon-vue';
    
      export default {
        components: {
          WaterIcon,
        },
      };
    </script>

    将 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

    Install

    npm i @fe6/icon-vue

    DownloadsWeekly Downloads

    6

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    37.5 MB

    Total Files

    13408

    Last publish

    Collaborators

    • fe6