npm-scripts だけで
SVG画像のインライン化

をしてみた

npm-scriptsのススメ

About

mimi（yumi）

たぶんフロントエンドエンジニア

HTML, CSS, PHP,  Node.js,

Drawing, Knitting, Sawing etc.

React.js, Nuxt.js, Python

 

 

名前：

生業：

好きな技術：

 

気になる技術：

 

WordPress歴：

WordPressの好きなところ：

10年余

オープンソース、REST API

@miminari

Today's topic

  • npm-scriptsがナンバーワンになったよ！
  • npm-scripts でSVG画像をインライン化してみた
  • WordPressへの導入をさらっと

The Front-End Tooling Survey 2018

タスクランナー部門 第一位！

47.8%

npm-scripts

SVG画像のインライン化を

やってみようと思ったワケ

SVG画像の自動インライン化を導入したい！

日本語だとパッと見Gulpでの方法しか見当たらないけれど、

npm-scripts でもいけるはず！

 

ココ数年、Gulpで自作アイコンフォントを作成していた

postcss-inline-svg

PostCSS のプラグイン。

SVGファイルをCSSにインライン化してくれる。

これだけでできました。

{
  "name": "svginline",
  "version": "1.0.0",
  "description": "sass compile, and svg inline etc.",
  "scripts": {
    "sass": "node-sass --include-path scss scss/style.scss style.css",
    "svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",
    "build": "npm run sass && npm run svginline"
  },
  "dependencies": {
    "cpx": "^1.5.0",
    "postcss-cli": "^5.0.0",
   },
  "devDependencies": {
    "node-sass": "^4.9.0",
    "postcss-inline-svg": "^3.1.1",
  }
}

package.json

※ SVG画像の最適化もしていますが、ここには入れていません。

必要な環境

  • Node.js

使った　　　　ライブラリ

  • cpx
    … ファイルのコピーや監視機能を担ってくれるお利口さん。
  • node-sass
    ... Sassのコンパイル担当。Sassが手放せない私の生命線。
  • postcss-cli
    ... PostCSSのcliです。
  • postcss-inline-svg
    … 今日の主役。
    CSSファイルに指定したSVGファイルをインライン化してくれます。

Just Code!

$link-color: #24241E;
@svg-load arrow-right url(svg/dist/icons/angle-right.svg) {
    fill: $link-color;
}

.m-btn {
    display: inline-block;
    margin: 1em 0;
    a {
        text-decoration: none;
    }
    &__link {
        border: 1px solid $link-color;
        color: $link-color;
        padding: .5em 0 .5em 1em;
        text-decoration: none;
        border-radius: 3px;
        &:after {
            content: '';
            background-image: svg-load('svg/dist/icons/angle-right.svg', fill=rgba($link-color,0.3));
            background-size: contain;
            background-repeat: no-repeat;
            height: 1.5em;
            width: 1.5em;
            display: inline-block;
            margin-left: .5em;
            vertical-align: bottom;
        }
    }
}

svg-load('svg画像へのパス',fill=色)

style.scss

Build

npm run build

※ もちろん watch もできるよ！

/* 前略 */
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='rgba(36, 36, 30, 0.3)'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");
/* 後略 */

Done!

style.css

html

<span class="m-btn"><a class="m-btn__link" href="#">ボタン</a></span>

preview

※ 命名規則はスルーしてください。

私が npm-scripts を

好きなワケ

SIMPLE

WordPressへの導入例

「既存のテーマに

Sassのコンパイルと圧縮

だけ導入してみる」

YourTheme/
    ├ dev/
        ├ package.json
        └ scss/
    ├ style.css
    ├ style.min.css
    └ （その他お馴染みのwordpress関連ファイル）
{
  "name": "myTemplate",
  "version": "1.0.0",
  "description": "sass compile, minmum etc.",
  "scripts": {
    "compile-sass": "node-sass --include-path scss scss/style.scss ../style.css",
    "publish": "node-sass --include-path scss scss/style.scss ../style.css --output-style compressed",
    "watch": "node-sass --include-path scss scss/style.scss ../style.css -w"
 },
  "dependencies": {
    "node-sass": "^4.9.0"
  }
}

必要なのは

・node-sass
のみ

package.json
ディレクトリ構成例

あとはコマンドを

入れるだけでOK

npm install
npm run watch
npm run publish

インストール
ファイル監視
CSSの圧縮
@wordpress-blue: #0073AA;
.mystyle {
    a {
        color: @wordpress-blue;
    }
}
.mystyle a {
     color: #0073AA;
}

SASS(SCSS)

CSS

保存するだけでコンパイル

@miminari

シンプルに小さく導入することが出来るので

個人や小さいグループの開発も多い

WordPressにも最適かと！

※ 個人の感想です