README

WordPress主题中内联可访问SVG图标的系统。

功能

使用WordPress模板中的简单函数调用直接渲染SVG图标。
SVG图标将根据可访问性标准和指南进行拆解和重建。
使用单个配置文件配置所有SVG图标。
选择是否将SVG文件存储在主题或插件中。

要求

WordPress >= 4.7
PHP >= 5.3
Composer
Node.js >= 6.9.x

安装

从命令行导航到您的WordPress plugins 目录。
运行此命令： composer create-project sb2-media/svg-icon-system。
切换到SVG Icon System目录： cd svg-icon-system。
运行 npm install。
运行 npm run dev。
运行 composer dump-autoload -o。
在WordPress仪表板上，导航到插件页面，找到名为“SVG Icon System”的菜单项。
点击 激活。

用法

图标文件夹存储

您可以选择将SVG图标文件存储在此插件中或主题中的任何位置。此插件将移除所有 <svg>、<title> 和 <desc> 标签，并根据可访问性标准和指南重新构建它们。

插件

默认情况下，SVG图标存储在此插件中的 assets/icons 文件夹中，并在运行Laravel Mix构建过程时复制到 dist/icons。如果您想利用默认行为，请将SVG图标存储在 assets/icons 并在插件的根目录中运行 npm run dev 或 npm run production。在添加新的SVG图标文件到存储后，必须运行 npm run dev 或 npm run production。

在 assets/icons 目录中包含一个用于演示的SVG图标文件。

icon_menu.svg

主题

如果您想在主题中存储SVG图标文件，只需将 config/svg-icons.php 中的 icon_folder_path 的值更改为文件存储的路径。在注释中给出了一些示例。

配置

使用单个配置文件 config/svg-icons.php 声明和配置SVG图标。配置遵循以下约定

    $icon_id => [
        'filename'              => $value,  // Required, MUST match the file name of the SVG icon
        'title'                 => $value,  // Optional but highly recommended for standalone, meaningful icons
        'description'           => $value,  // Optional but recommended for standalone, meaningful icons
        'viewbox_x'             => $value,  // Optional, will default to '0' if left blank
        'viewbox_y'             => $value,  // Optional, will default to '0' if left blank
        'viewbox_width'         => $value,  // Recommended, width must be set if left blank
        'viewbox_height'        => $value,  // Recommended, height must be set if left blank
        'width'                 => $value,  // Optional, viewbox_width must be set if left blank
        'height'                => $value,  // Optional, viewbox_height must be set if left blank
        'preserve_aspect_ratio' => $value,  // Optional
        'class' => $value,  // Optional, custom classes to add
        'style'                 => $value,  // Optional
    ],

注意

filename 必须与SVG图标文件的名称匹配。
独立的、有意义的图标应在其配置中设置标题和可能的描述。如果声明了标题（和描述），则插件将使用具有唯一ID的 aria-labelledby= 属性渲染SVG图标，以将标题（和描述）链接到相应的 <title>（和 <desc>）元素。
纯装饰性的图标不需要标题和描述。在配置中留空，将添加 aria-hidden="true" 属性到 <svg> 元素上。
在配置中必须设置width和height属性或viewbox_width和viewbox_height属性。如果只声明了width和height，则viewbox_width和viewbox_height将继承它们的值。如果只设置了viewbox_width和viewbox_height的值，则不会将width和height属性添加到<svg>元素中。
preservedAspectRatio和style属性是可选的。

示例

文件icon_menu.svg

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.016" y="6.41" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"/>
  <rect x="0.014" y="12.656" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"/>
  <rect x="0.017" y="0.164" width="19.969" height="3.18"  style="fill: rgb(51, 51, 51);"/>
</svg>

设置最小配置的配置

    'menu' =>   [
        'filename'              => 'icon_menu',
        'title'                 => '',
        'desc'                  => '',
        'viewbox_x'             => '',
        'viewbox_y'             => '',
        'viewbox_width'         => '20',
        'viewbox_height'        => '16',
        'width'                 => '',
        'height'                => '',
        'preserve_aspect_ratio' => '',
        'class' => '',
        'style'                 => '',
    ],

输出

<svg class="icon icon-menu" aria-hidden="true" viewBox="0 0 20 16" role="img">        
    <rect x="0.016" y="6.41" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
    <rect x="0.014" y="12.656" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
    <rect x="0.017" y="0.164" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
</svg>

设置所有属性的配置

    'menu' =>   [
        'filename'              => 'icon_menu',
        'title'                 => 'Menu icon',
        'desc'                  => 'Three equal width horizontal bars stacked on top of one another to symbolize a menu',
        'viewbox_x'             => '0',
        'viewbox_y'             => '0',
        'viewbox_width'         => '20',
        'viewbox_height'        => '16',
        'width'                 => '20',
        'height'                => '16',
        'preserve_aspect_ratio' => 'xMinYMin',
        'class'                 => 'custom-class',
        'style'                 => 'color: red;',
    ],

输出

<svg class="icon icon-menu custom-class" aria-labelledby="title-nYY desc-nYY" width="20" height="16" viewBox="0 0 20 16" preserveAspectRatio="xMinYMin" style="color: red;" role="img">
    <title id="title-nYY">Menu icon</title>
    <desc id="desc-nYY">Three equal width horizontal bars stacked on top of one another to symbolize a menu</desc>    
    <rect x="0.016" y="6.41" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
    <rect x="0.014" y="12.656" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
    <rect x="0.017" y="0.164" width="19.969" height="3.18" style="fill: rgb(51, 51, 51);"></rect>
</svg>

功能

在配置中定义的图标可以使用get_svg_icon( $icon_id )函数调用放置在WordPress模板的任何位置。

<button class="menu-toggle">
    <?php get_svg_icon( 'menu' ); ?>
</button>

许可

SVG图标系统受GPL v2或更高版本许可。

本程序是免费软件；您可以在自由软件基金会发布的GNU通用公共许可证的条款下重新分配和/或修改它，版本2。

本程序分发时希望它是有用的，但没有任何保证；甚至没有关于其商誉或特定用途适用性的暗示性保证。有关更多详细信息，请参阅GNU通用公共许可证。

您应已随本程序收到GNU通用公共许可证的副本；如果没有，请写信给自由软件基金会，公司地址：51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

许可的副本包含在插件目录的根目录中。文件名为LICENSE。

致谢

此插件的部分代码和概念改编自Carl Alexander和Tonya Mork的Fulcrum插件。

sb2-media / svg-icon-system

维护者

详细信息

README

功能

要求

安装

用法

图标文件夹存储

插件

主题

配置

注意

示例

功能

许可

致谢