npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@polyv/icons-vue-next

v1.1.0

Published

Polyv Icons for Vue3

Downloads

4

Readme

PolyvIcon 保利威图标库(Vue3.x)

  • 保利威前端图标库
  • 适用平台:Vue3.x

开发指南

安装

npm install @polyv/icons-vue-next --save

引用图标

vue 文件中引用图标

<template>
  <icon-add-circle type="filled" />
</template>

<script>
import { AddCircle } from '@polyv/icons-vue-next';

export default {
  components: {
    IconAddCircle: AddCircle,
  },
};
</script>

jsx / tsx 中引用图标

import { defineComponent } from 'vue';
import { AddCircle } from '@polyv/icons-vue-next';

export default defineComponent({
  setup() {
    return () => {
      return (
        <AddCircle type="filled" />
      );
    };
  },
});

引入样式

引入图标所需的样式文件。

import '@polyv/icons-vue-next/styles/index.css';

按需加载

按需加载需要借助 babel-plugin-import 以达到减少项目构建后的体积。

第一步:安装 babel-plugin-import

npm install babel-plugin-import -D

第二步:配置 babel.config.js 或 .babelrc

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '@polyv/icons-vue-next',
        libraryDirectory: 'icons',
      }
    ],
  ]
};

全局加载

你可以引入 @polyv/icons-vue-next/icon 来加载全局的图标。

如无特殊情况,请使用按需加载的方式引入图标库,因为按需加载可以减少项目构建后的体积。

<template>
  <div class="demo-icon">
    <polyv-icon icon="Camera" />
    <!-- 支持横线格式 -->
    <polyv-icon icon="add-circle" />
  </div>
</template>

<script>
import { PolyvIcon } from '@polyv/icons-vue-next/icon';

export default {
  components: {
    PolyvIcon,
  },
};
</script>

你也可以在项目入口全局安装图标库:

import { createApp } from 'vue';
import { installIcon } from '@polyv/icons-vue-next';

const app = createApp();

/**
 * 全局安装图标库
 * 1. 安装 <polyv-icon /> 组件;
 * 2. 安装各图标组件;
 */
installIcon(app); // 默认前缀:icon,即使用 Camera 图标时,组件名为 <icon-camera />
installIcon(app, { prefix: 'polyv-icon' }); // 自定义前缀,即使用 Camera 图标时,组件名为 <polyv-icon-camera />

app.mount('#app');

如果你使用图标库脚手架生成项目定制的图标,那么你可以在调用 installIcon 时传入 customIcons

import { createApp } from 'vue';
import { installIcon } from '@polyv/icons-vue-next';
import * as IconMap from '脚手架生成的 map 文件';

const app = createApp();

installIcon(app, {
  customIcons: IconMap,
});

此时在组件中使用图标(以 custom-a.svg 文件为例):

<template>
  <div class="demo-icon">
    <custom-a />
    <polyv-icon icon="custom-a" />
  </div>
</template>

组件参数

| 参数 | 说明 | 类型 | 默认值 | | - | - | - | - | | size | 图标大小,支持使用 css 设置 | number | 24 | | type | 图标类型 | 'outline' \| 'filled' \| 'two-tone' \| 'multi-color' | 'outline' | | color | 图标颜色,最多不超过 4 个颜色 | string \| string[] | 'currentColor' | | strokeLinecap | 图标端点类型(圆润、正常、方形) | 'round' \| 'butt' \| 'square' | 'round' | | strokeLinejoin | 图标拐点类型(圆润、斜面、尖锐) | 'round' \| 'bevel' \| 'miter' | 'round' |

使用方式

图标类型与多色图标

颜色数组的 4 个项分别为:外部描边色 (outStrokeColor)、外部填充色 (outFillColor)、内部描边色 (innerStrokeColor)、内部填充色 (innerFillColor)。

图标类型共分为 4 种,个别图标可能不支持所有类型的设置,具体情况请见图标汇总页:

  • outline:线性图标。
  • filled:填充图标。
  • two-tone:双色图标。
  • multi-color:四色图标。

各类型的颜色设置可见示例代码:

<template>
  <div class="demo-icon">
    <!-- 线性图标 -->
    <icon-camera type="outline" color="#333" />
    <!-- 填充图标 -->
    <icon-camera type="filled" color="#333" />
    <!-- 双色图标 -->
    <icon-camera type="two-tone" :color="['#333', '#2F88FF']" />
    <!-- 四色图标 -->
    <icon-camera type="multi-color" :color="['#333', '#2F88FF', '#FFF', '#43CCF8']" />
  </div>
</template>

<script>
import { Camera } from '@polyv/icons-vue-next';

export default {
  components: {
    IconCamera: Camera,
  },
};
</script>

图标的 className 规则

每个图标都有一个 polyv-icon 的公用 class 以及 polyv-icon-[name] 的 class 属性,如:Camera 的 class 为 polyv-icon polyv-icon-camera

你可以通过 css 样式的 font-sizecolor 去设置图标的大小和颜色。

outlinefilled 两种图标类型支持 css 设置图标颜色。

<template>
  <div class="demo-icon">
    <icon-camera />
  </div>
</template>

<script>
import { Camera } from '@polyv/icons-vue-next';

export default {
  components: {
    IconCamera: Camera,
  },
};
</script>

<style>
.demo-icon .polyv-icon-camera {
  font-size: 36px !important;
  color: #2196f3;
}
</style>