pile-icons

此库存放pile-icons的svg图标

https://renmm.github.io/pile-icons

使用svg图标

install

npm i --save pile-icons 

按需加载svg icon，使用babel-plugin-import:

install

npm i -D babel-plugin-import

Via .babelrc or babel-loader.

{
  "plugins": ["import", {
      "libraryName": "pile-icons",
      "customName": name => `pile-icons/dist/svg/${name}.svg`
    }]
}

examples:

import { car } from 'pile-icons';
 
      ↓ ↓ ↓ ↓ ↓ ↓
      
var car = require('pile-icons/svg/car.svg');

生成svg-sprite，使用webpack插件svg-sprite-loader

install

npm i -D svg-sprite-loader

update webpack.config:

config.module.rules.push({
  test: /\.svg$/,
  include: ['pile-icons'],
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: '[name]',
      },
    },
  ],
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  exclude: ['pile-icons'],
  loader: 'url-loader?limit=10000&minetype=image/svg+xml',
});

::: warning 配置2条规则，是因为pile-icons需要依赖svg-sprite-loader动态将svg生成svg-sprite格式，而项目里的其他使用svg格式的不需要。 :::

使用svg图标:

import {car} from 'pile-icons';

<svg :viewBox="car.viewBox">
  <use :xlink:href="`#${car.id}`" />
</svg>

::: warning 需要依赖webpack的插件svg-sprite-loader动态插入svg-sprite :::