https://github.com/monster1935/svg-sprite-icon

基于svg-sprite的webpack icon解决方案
https://github.com/monster1935/svg-sprite-icon

svg svg-sprite-loader svgo svgo-loader

Last synced: 3 days ago
JSON representation

基于svg-sprite的webpack icon解决方案

• Host: GitHub
• URL: https://github.com/monster1935/svg-sprite-icon
• Owner: monster1935
• Created: 2018-10-14T05:49:03.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-14T05:50:48.000Z (about 6 years ago)
• Last Synced: 2024-11-10T12:21:14.895Z (2 months ago)
• Topics: svg, svg-sprite-loader, svgo, svgo-loader
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svg-sprite-icon

Icon resolution based on svg in vue single-page project.

## Install

Using npm：

```

npm install svg-sprite-icon --save-dev

npm install svg-sprite-loader --save-dev

npm install svgo svgo-loader --save-dev

```

## Usage

First, use in `main.js`

```js

import Vue from 'vue';

import SvgIcon from 'svg-sprite-icon';

Vue.use(SvgIcon);

```

Second, add such config in `webpack.base.conf.js`

```js

// base svgo config rules

const svgoLoaderConfig = require('svg-sprite-icon/svgo-loader.conf');

module: {

   {

    test: /\.svg$/,

    include: [resolve('src/assets/icons')],

    use: [

      {

        loader: 'svg-sprite-loader',

        options: {

          symbolId: 'icon-[name]'

        }

      },

      {

        loader: 'svgo-loader',

        options: svgoLoaderConfig,

      }

    ]

  },

  {

    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

    loader: 'url-loader',

    exclude: [resolve('src/assets/icons')], // in case svg icon to be resolved

    options: {

      limit: 10000,

      name: utils.assetsPath('img/[name].[hash:7].[ext]')

    }

  },

}

```

Third, use in your vue component

```vue

  

import '@/assets/add.svg';

export default {

  

};

```

## Props

### iconClass

the unique icon id bind on the tag ``. **so this props must be equal with you svg file name.** Because in `webpack.base.conf.js`, svg-sprite-loader was set the options `symbolId` with the file name. This props is required when use.

### svgClass

add extra class to the tag ``, if you don't transfer it, svg would bind the default class `svg-icon`

## Import Svg

There are two ways to import the svg icon files:

- one by one, import when use

```js

import "@/assets/icon/add.svg";

import "@/assets/icon/plus.svg";

...

```

- import all svg icon files

```js

const requireAll = requireContext => requireContext.keys().map(requireContext);

const req = require.context('./assets/icons', false, /\.svg$/);

requireAll(req);

```

  Attension: The first param of `require.context` must be literal. more detail: [require.context](https://webpack.js.org/guides/dependency-management/).

## Licence

MIT