@ carbon/ icons- vue
使用Carbon 的数字和软件产品图标的 Vue 组件 设计系统
开始
要安装 @carbon/icons-vue 在您的项目中,您需要运行
根据命令使用 无数字 :
npm install -S @carbon/icons-vue
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/icons-vue
使用量
本包中的图标支持以下大小: 16, (中文(简体) ), 20, (中文(简体) ), 24,以及 32
相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 这些尺寸指的是图标的宽度和高度.
您可以从 @carbon/icons-vue 通过两种方式。 这个
首先在您初始化 Vue 应用程序时安装它们 。 例如:
import { CarbonIconsVue } from '@carbon/icons-vue';
import Bee32 from '@carbon/icons-vue/es/bee/32';
import Vue from 'vue';
import App from './App.vue';
Vue.use(CarbonIconsVue, {
components: {
Bee32,
},
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
注意: 如果您想要找到图标的导入路径, 您可以参考 我们 图标预览
使用 CarbonIconsVue 我们可以通过任何 我们想要的图标组件
用来使用。 在我们的申请中,我们可以通过以下方式使用:
<template>
<Bee32 />
</template>
如果您不愿在全球注册图标, 您也可以导入到 各个组成部分.
import Bee32 from '@carbon/icons-vue/es/bee/32';
export default {
name: 'MyComponent',
component: {
Bee32,
},
};
您可以通过道具传递到任何图标组件, 用于无障碍等 标签,自定义类,事件处理器等等。 例如:
<template>
<Bee32 aria-label="Bee" class="custom-class" v-on:click="handler" />
</template>
实例
如果你想要更多关于如何使用的例子 @carbon/icons-vue我们有
您可以查看一些实例 :
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .