0.3.0 • Published 1 year ago

@xinmier/ui--icons-1 v0.3.0

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

辛米尔标准界面组件 · 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 。

用法（面向本资源集的设计制作人员）

资源结构

本资源集采用两级树状结构来组织其中一切图形：

  1. 第一级为所谓【图形集】。
  2. 第二级为所谓【图形】，均系单体。

原因如下。

实践中，不少图形有高度的相干性，可视为一类，或者说形成一个集合。典型的，例如：风格相同的箭头，四枚（上下左右），乃至八枚（含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 图形。于任一图形，均有三种形式： 1. 【定义形式】，亦称【Def 形式】； 1. 【定义调用形式】，亦称【Use 形式】； 1. 【完整独立形式】，亦称【Full 形式】。

以上三在形式，又可分为两大类：

  1. 须成对存在、成对使用的【定义形式】与【定义调用形式】。

  2. 独立存在、可独自使用的【完整独立形式】。

以上两类，仅需用其一，不必两类均采用。 然若兼采两类，亦相互无碍。

又，以上两类，用法有所不同。见下文。

在 Vuejs 项目中使用本资源集中某图形之【定义形式】与【定义调用形式】

浅析
Svg 语言中 <defs /> 与 <use /> 的简介

在 svg 语言中的 <defs /> 代表 definitions ，意为“定义” 又因其采用复数形式（结尾带有字母“s”），故不妨译为“定义集”、“定义表”等。

凡 <defs /> 标签之内容，均系“预备”或“备用”内容，它们不会直接“呈现”。

又，HTML 网页中可以引用 svg 代码以描绘图形。故下文不妨以 HTML 网页中的 svg 为例。

网页中，凡置于 svg 代码片段中的 <defs /> 标签内的图形，都不会（直接）出现在最终渲染的网页中。须由网页中其他代码以某种方式“调用”之。由是，不妨暂称这些位于 <defs /> 内的图形为所谓“待调用之图元”，简称“图元”。

每当网页中另有其他代码来调用 <defs /> 内的“图元”时，该图元在该调用处呈现一次。调用多次，则呈现多次。所谓“呈现”，即是指那图元所代表的图形会出现在最终渲染的网页中。

那么，其他代码调用图元的要领是怎样的呢？调用图元有 3 个要点：

  1. <defs /> 内的图元的根标签（tag）须有唯一的 id 。

  2. 于其他代码中，凡调用某图元时，须采用 svg 语言的 <use /> 标签，且须凭借该图元的 id 。写法是 <use href="#某图元之id" /> 。还需注意， id 之前须冠以井号（#）。

  3. 凡调用图元的代码，须位于单独的 <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>

上方简例的渲染效果如下图：

svg-defs-与-use-显卡-渲染例图

又，凡本工具集之图形，其对应的应置于 <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 项目中凡须采用【定义调用形式】处，均要执行的动作。

  1. 在 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'

  1. 在 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 /> 配对使用的局限性》一节。

具体步骤

  1. 在 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'
@xinmier/ui--layout-parts
0.3.0

1 year ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago