@xinmier/ui--icons-1
v0.3.0
Published
辛米尔标准界面组件·Svg图标集1 。
Downloads
7
Readme
辛米尔标准界面组件 · Svg 图标集1
npm 包
npm 包之名称
@xinmier/ui--icons-1 。
npm 包之主页
https://www.npmjs.com/@xinmier/ui--icons-1。
概述
@xinmier/ui--icons-1 是一个 npm 包，下称【本软件】。
本软件拟包含一系列界面编程组件，面向网页开发人员，而非最终用户。
本软件拟包含的一系列界面组件，应全都是 SVG 图形。且这些图形均以记载在 .vue 文件中，即以 Vuejs 组件的形式存在。
本软件中的所有组件均无关乎 Vuejs 的版本，通用于 Vuejs 2 与 3 。
用法（面向本资源集的设计制作人员）
资源结构
本资源集采用两级树状结构来组织其中一切图形：
- 第一级为所谓【图形集】。
- 第二级为所谓【图形】，均系单体。
原因如下。
实践中，不少图形有高度的相干性，可视为一类，或者说形成一个集合。典型的，例如：风格相同的箭头，四枚（上下左右），乃至八枚（含45度斜角方向的四枚）为一个集合。于本资源集中，这样的一组箭头图形，形成单一的所谓【图形集】，其中每个箭头是一个所谓【图形】。
另，对于网页开发人员而言，每个【图形】还对应 3 种形式。见下文《用法（面向网页开发人员） · 在代码中使用本资源集内的图形》。
那么，难有类同图形的所谓“独立”图形如何安排呢？目前的做法是，强制其自成一集，故仍能形成两级结构。
总之，于本资源集，凡【图形】，必隶属于某【图形集】。
产出
本资源集之可用部分称为【产出】。凡【产出】均系由一些【源】变化得到。要令【源】变化形成对应的【产出】，须执行以下步骤。
在命令行环境，cd 到本资源集源代码之根文件夹下，并做以下动作：
如果命令行环境是【类 Bash】环境：
npm run build-on-linux如果命令行环境是【PowerShell】或【Windows CMD】环境：
npm run build-on-Windows
用法（面向网页开发人员）
安装
本资源集服务于采用 Vuejs 框架的网页开发项目。故而，欲采用本资源集，须先自行架设一个 Vuejs 项目。
在命令行环境中，cd 进入你的网页开发项目的文件夹，并执行以下命令：
npm i @xinmier/ui--icons-1在代码中使用本资源集内的图形
本资源集之【产出】面向网页开发人员。程序员在编写其代码时，可以采用本资源集之【产出】。
又，程序员仅采用【产出】，而不必采用 【源】。况且，本资源集在发布时故意未将【源】包含其中。
又，凡本工具集之【产出】，均为 Vuejs 组件。故下方所谓用法均系介绍在编程活动中如何采用这些组件。因此，所谓“用法”亦称“写法”。
凡【产出】，均系 Svg 图形。于任一图形，均有三种形式：
- 【定义形式】，亦称【Def 形式】；
- 【定义调用形式】，亦称【Use 形式】；
- 【完整独立形式】，亦称【Full 形式】。
以上三在形式，又可分为两大类：
须成对存在、成对使用的【定义形式】与【定义调用形式】。
独立存在、可独自使用的【完整独立形式】。
以上两类，仅需用其一，不必两类均采用。 然若兼采两类，亦相互无碍。
又，以上两类，用法有所不同。见下文。
在 Vuejs 项目中使用本资源集中某图形之【定义形式】与【定义调用形式】
浅析
Svg 语言中 <defs /> 与 <use /> 的简介
在 svg 语言中的 <defs /> 代表 definitions ，意为“定义” 又因其采用复数形式（结尾带有字母“s”），故不妨译为“定义集”、“定义表”等。
凡 <defs /> 标签之内容，均系“预备”或“备用”内容，它们不会直接“呈现”。
又，HTML 网页中可以引用 svg 代码以描绘图形。故下文不妨以 HTML 网页中的 svg 为例。
网页中，凡置于 svg 代码片段中的 <defs /> 标签内的图形，都不会（直接）出现在最终渲染的网页中。须由网页中其他代码以某种方式“调用”之。由是，不妨暂称这些位于 <defs /> 内的图形为所谓“待调用之图元”，简称“图元”。
每当网页中另有其他代码来调用 <defs /> 内的“图元”时，该图元在该调用处呈现一次。调用多次，则呈现多次。所谓“呈现”，即是指那图元所代表的图形会出现在最终渲染的网页中。
那么，其他代码调用图元的要领是怎样的呢？调用图元有 3 个要点：
<defs />内的图元的根标签（tag）须有唯一的id。于其他代码中，凡调用某图元时，须采用 svg 语言的
<use />标签，且须凭借该图元的id。写法是<use href="#某图元之id" />。还需注意，id之前须冠以井号（#）。凡调用图元的代码，须位于单独的
<svg />标签内，且须该<svg />标签自行决定图元在该调用处的尺寸。故而，该<svg />标签须主动指明viewBox。亦不妨指明width。见例。可以仅指明
viewBox：<svg viewBox="0 0 319 515"><use href="#某图元之id" /></svg>亦可同时指明
width：<svg viewBox="0 0 319 515" width="2013"><use href="#某图元之id" /></svg>
下方有一完整的简例，用以说明图元与调用代码的使用方法。须注意，该简例单纯为了说明 svg 语言的上述特点，但与本工具集的具体用法并不一致。故仅作参考。
又，下方完整简例已经单独保存成一个 html 文件，乃是位于源代码库中的 ./文档集/示例-svg-defs-与-use-显卡.html 。可在 git 代码库中找到它。但在 npm 服务器上发布的内容，并不包含该单独的 html 文件。
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Svg 的 defs 与 use</title>
<style>
li {
margin-bottom: 4rem;
}
</style>
</head>
<body>
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.card-pcie-interface-pcb {
stroke-width: 0px;
}
.card-pcie-interface-fingers {
stroke-width: 0px;
}
.card-shell {
stroke-width: 0.03rem;
}
.card-shelf {
stroke-width: 0.01rem;
}
.gpu-label-frame {
stroke-width: 0px;
}
.gpu-label-text {
stroke-width: 0px;
}
.card-shelf {
stroke: rgba(0, 0, 0, 0.384);
fill: rgb(236, 240, 245);
filter: drop-shadow(0.15rem 0.15rem 0.1rem rgb(0 0 0 / 0.25));
}
.card-pcie-interface-pcb {
fill: #70b597;
filter: drop-shadow(0.15rem 0.15rem 0.075rem rgb(0 0 0 / 0.23));
}
.card-pcie-interface-fingers {
fill: #ffe498;
}
.card-shell {
filter: drop-shadow(0.3rem 0.3rem 0.25rem rgb(0 0 0 / 0.19));
}
.gpu-label-text {
fill: white;
}
.card-shell {
stroke: hsl(100, 51%, 45%);
fill: hsl(100, 86%, 86%);
}
.gpu-label-frame {
fill: hsl(100, 79%, 45%);
}
.color--purple .card-shell {
stroke: hsl(288, 79%, 51%);
fill: hsl(288, 88%, 90%);
}
.color--purple .gpu-label-frame {
fill: hsl(288, 79%, 51%);
}
</style>
<defs>
<g id="xme-shape-def--gpu-card">
<g class="card-pcie-interface">
<path class="card-pcie-interface-pcb" d="M460.28,327.74l-398.47-0.3v15.21h35.28v19.1c0,2.89,2.34,5.24,5.24,5.24h10.82
c2.89,0,5.24-2.34,5.24-5.24v-8.45c0-3.19,2.59-5.78,5.78-5.78h0c3.19,0,5.78,2.59,5.78,5.78v28.81c0,1.39,1.13,2.52,2.52,2.52
h24.76c1.39,0,2.52-1.13,2.52-2.52v-26.15c0-0.96,0.78-1.74,1.75-1.74h1.38c0.96,0,1.75,0.78,1.75,1.74v26.15
c0,1.39,1.13,2.52,2.52,2.52h227.34c1.39,0,2.52-1.13,2.52-2.52v-26.15c0-0.96,0.78-1.74,1.74-1.74h1.38
c0.96,0,1.75,0.78,1.75,1.74v13.98c0,1.39,1.13,2.52,2.52,2.52h33.73c1.27,0,2.43-0.72,2.99-1.86l2.73-5.54v-7.2h-17.03
c-4.03,0-7.3-3.27-7.3-7.3v0c0-4.03,3.27-7.3,7.3-7.3h33.46V327.74z"
/>
<path class="card-pcie-interface-fingers" d="M397.01,362.35v19.74c0,1.39-1.13,2.52-2.52,2.52H167.14
c-1.39,0-2.52-1.13-2.52-2.52v-19.74H397.01z M132.47,384.62h24.76c1.39,0,2.52-1.13,2.52-2.52v-19.74h-29.81v19.74
C129.94,383.49,131.07,384.62,132.47,384.62z"
/>
</g>
<path class="card-shell" d="M55,338.88V25.62h951.63c2.84,0,5.15,2.31,5.15,5.15v302.95c0,2.84-2.31,5.15-5.15,5.15H55z" />
<polygon class="card-shelf" points="52.46,392.63 52.46,20.12 13.78,20.12 13.78,14.63 58.15,14.63 58.15,392.63" />
<g class="gpu-label">
<path
class="gpu-label-frame"
d="M971.31,149.13l0-95.41l39.89,0 l0,95.41L971.31,149.13z"
/>
<path
class="gpu-label-text"
d="M991.13,68.18c8.04,0,12.65,5.42,12.65,11.87c0,3.54-1.49,6.07-3.15,7.72l-3.7-3.05
c1.07-1.2,1.88-2.47,1.88-4.48c0-3.57-2.79-6.13-7.49-6.13c-4.8,0-7.59,2.14-7.59,6.65c0,0.84,0.23,1.75,0.62,2.27h3.89v-3.83h4.74
v8.99h-11.29c-1.62-1.69-2.95-4.67-2.95-8.04C978.74,73.47,982.96,68.18,991.13,68.18z M1003.36,93.06v8.5
c0,5.29-1.91,9.67-7.88,9.67c-5.74,0-8.27-4.41-8.27-9.54v-2.82l-8.01,0v-5.81L1003.36,93.06z M991.78,101.4
c0,2.82,1.33,4.18,3.7,4.18c2.43,0,3.28-1.56,3.28-4.35v-2.37h-6.97V101.4z M990.55,115.21h12.81v5.77l-13.43,0
c-4.57,0-6.2,1.36-6.2,4.02c0,2.63,1.62,4.09,6.2,4.09l13.43,0l0,5.58h-12.81c-8.14,0-11.81-3.24-11.81-9.67
C978.74,118.55,982.4,115.21,990.55,115.21z"
/>
</g>
</g>
<!-- 甚至可以在 defs 中凭借 <use /> 其他图形来定义一个新的图形。下例的新图形名为 "gpu1" 。 -->
<use id="gpu1" href="#xme-shape-def--gpu-card" />
</defs>
</svg>
</div>
<!-- 以上为 display: none; -->
<ul>
<li>
<p>显卡甲：</p>
<svg viewBox="0 0 1050 400" width="319"><use href="#xme-shape-def--gpu-card" /></svg>
</li>
<li>
<p>显卡乙：</p>
<svg viewBox="0 0 1050 400" width="319"><use href="#gpu1" /></svg>
</li>
<li>
<p>显卡丙：</p>
<svg viewBox="0 0 1050 400" width="319">
<!-- 注意！下方 class="color--purple" 是无效的，即并不会令显卡着紫色。 -->
<use href="#xme-shape-def--gpu-card" class="color--purple" />
</svg>
</li>
<li>
<p>显卡丁（尺寸很小）：</p>
<svg viewBox="0 0 1050 400" width="123"><use href="#xme-shape-def--gpu-card" /></svg>
</li>
</ul>
</body>
</html>上方简例的渲染效果如下图：
又，凡本工具集之图形，其对应的应置于 <defs /> 内的组件，称为该图形的【定义形式】，亦称 【Def 形式】；其对应的用以代替 <use /> 标签的组件，称该图形的【定义调用形式】，亦称【Use 形式】。本资源集中的图形，其【定义形式】于其【定义调用形式】是配对存在的。使用时亦应配对使用。
又，本资源集中的图形：
- 凡有【定义形式】者，其【定义形式】中已经配备了唯一的
id。 - 凡有【定义调用形式】者，其【定义调用形式】中的
<use />标签已经正确调取了对应 Def 中写明的id，且其外层的<svg />标签已经写明了正确的viewBox。
svg 语言中 <defs /> 与 <use /> 配对使用的局限性
由上文的完整简例可见，采用 <defs /> 与 <use /> 配合，可以大大减少 svg 语言的代码量。
但它们也是有局限的。同样时那个完整简例，可见样式都作用于 <defs /> 内的原始图元，令显卡的主体呈现嫩绿色。在 <use /> 的代码中再想改变显的颜色，已无可能！
变通的方法有很多，但最简单的做法是，不采用 <defs /> 与 <use /> ，而是直接采用完整的 svg 代码来描述一个图形。 故而，本资源集中的图形，均提供了所谓“Full形式”。
具体步骤
共两个步骤。对于特定的 Vuejs 项目，第 1 步仅需执行一次。而所谓“第 2 步”实际上不是一个步骤，而是应在 Vuejs 项目中凡须采用【定义调用形式】处，均要执行的动作。
在 Vuejs 项目中的某个公共组件中，在 svg 代码之
<defs />标签内记载欲采用的图形的【定义形式】（即【Def 形式】）。例如，不妨设计一个所谓 “app-shared-hidden-resources” 组件，其中存放一切 svg 的一切
<defs />。而其中的某个<defs />中则可存放本资源集中诸图形的【定义形式】。有两种写法，见下例。可见，第二种写法更简便，推荐之。第 1 步有两种写法。以下是第一种写法：
<template> <div class="app-shared-hidden-resources" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <XmeIcons_Arrows1.Upwards.Def /> <XmeIcons_Arrows1.Rightwards.Def /> <XmeIcons_Arrows1.LeftWards.Def /> <XmeIcons_Arrows1.Rightwards.Def /> <XmeIcons_Arrows1.Rightwards.Def /> <XmeIcons_Pin.Unpinned.Def /> </defs> </svg> </div> </template>import { XmeIcons_Arrows1, XmeIcons_Pin, } from '@xinmier/ui--icons-1'第 1 步有两种写法。以下是第二种写法：
<template> <div class="app-shared-hidden-resources" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <XmeIcons_AllDefs /> </defs> </svg> </div> </template>import XmeIcons_AllDefs from '@xinmier/ui--icons-1/all-defs'
在 Vuejs 项目中任意组件内采用上述图形的【定义调用形式】（即【Use 形式】）。
可以这样写：
<template> <div class="my-some-page"> 出发 <XmeIcons_Arrows1.Rightwards.Use /> </div> </template>import { XmeIcons_Arrows1, } from '@xinmier/ui--icons-1'也可以这样写：
<template> <div class="my-some-page"> 出发 <IconArrowRight.Use /> </div> </template>import { XmeIcon_Arrows1_Rightwards as IconArrowRight, } from '@xinmier/ui--icons-1/icons/Arrows1'
在 Vuejs 项目中使用本资源集中某图形之【完整独立形式】
浅析
本资源集中的图形，凡其【完整独立形式】（即【Full 形式】），均可独立使用，不依赖其余任何资源。
参阅本文《svg 语言中 <defs /> 与 <use /> 配对使用的局限性》一节。
具体步骤
在 Vuejs 项目中任意组件内采用本资源集中某图形的【完整独立形式】（即【Full 形式】）。
可以这样写：
<template> <div class="my-some-page"> <XmeIcons_Arrows1.Rightwards.Full /> </div> </template>import { XmeIcons_Arrows1, } from '@xinmier/ui--icons-1'也可以这样写：
<template> <div class="my-some-page"> <IconArrowRight.Full /> </div> </template>import { XmeIcon_Arrows1_Rightwards as IconArrowRight, } from '@xinmier/ui--icons-1/icons/Arrows1'