@ frontiers/ 图片

综合象形图库 有彩色 SVG 插图和 Vue 3 组件用于边疆设计系统.

特征

• 🎨 彩色说明 - 全色象形图(不是像图标那样的一色相)
• 📐 256px 大小 - 2xl大小的显著显示变体
• 🎭 颜色变量 - 每个象形图的多色方案(红色、蓝色、绿色等)
• ⚡ Vue 3 组件 - 有类型脚本支持的可准备使用的Vue组件
• 📦 直接 SVG 访问 - 必要时直接导入 SVG 文件
• 🔧 自定义大小 - Vue组件可调整尺寸道具

安装

npm install @frontiers/pictograms

使用量

Vue 组件

<script setup>
import {
  SearchBluePictogram,
  DeniedRedPictogram,
  ScienceBluePictogram,
} from "@frontiers/pictograms"
</script>

<template>
  <div>
    <!-- Default size (256px) -->
    <SearchBluePictogram />

    <!-- Custom size -->
    <DeniedRedPictogram :size="128" />
    <ScienceBluePictogram size="512" />

    <!-- With custom classes -->
    <SearchBluePictogram :size="200" class="my-custom-class" />
  </div>
</template>

直接 SVG 导入

import searchBlue from "@frontiers/pictograms/svg/search-pictogram-blue.svg"
import deniedRed from "@frontiers/pictograms/svg/denied-pictogram-red.svg"

组件命名

象形图组件遵循此命名模式:

• SVG 文件名数字 : {name}-pictogram-{color}.svg (婴儿箱)
• 组件名称数字 : {Name}{Color}Pictogram (PascalCase,为避免冗余而去掉"-相图-")

实例:

颜色变量

象形图有多种颜色变体:

• QQ 蓝色( 默认)
• 红色
• 绿色
• 黄色
• 橘子酱
• 紫色( 紫色 )

如果象形图没有特定的颜色变体,则将蓝色变体作为默认.

道具

所有象形图组件接受以下道具:

size

• 类型数字 : Number | String
• 默认数字 : 256
• 说明: 像素象形图的宽度和高度

<AccessibilityBluePictogram :size="128" />
<AccessibilityBluePictogram size="256" />

与图标的差异

类型脚本支持

此软件包包括类型脚本定义 :

import type { PictogramComponent, PictogramProps } from "@frontiers/pictograms"

const MyPictogram: PictogramComponent = AccessibilityBluePictogram

发展

法格玛大楼

此软件包包含从 Figma 导出和生成组件的脚本 :

# Export SVGs from Figma
npm run export

# Generate Vue components from SVGs
npm run generate

# Do both
npm run build

所需资源数字 :

• 图片个人访问 托肯( 设置于 .env 文件为 FIGMA_TOKEN(中文(简体) )
• 访问边疆基金会 Figma 文件

图片来源

图片来源于:

文件数字 : 基金会
页次:🔵相图(节点-id=10265-817)
大小: 2xl (256px) 变种

许可证

麻省理工学院

捐款

欢迎捐款! 请参看捐款准则的主要存放处.

相关软件包

• @ frontiers/ icons (英语) - 单色图标库(24px)
• @ frontiers/ preme - preset - PrimeVue 主题预设
• @ frontiers/ 尾风插座 - 尾风CSS公用事业

• 为边境定制