0.1.1 • Published 6 years ago
svg-from-illustrator-loader v0.1.1
svg-from-illustrator-loader
A loader for webpack that makes it easy to use SVG from Illustrator
// React
import Example from './Example.svg'
export default () => (
<span dangerouslySetInnerHTML={{ __html: Example }} />
)
Installation
npm install svg-from-illustrator-loader
Configuration
// ...
{
test: /\.svg$/,
use: [
{
loader: require.resolve('svg-from-illustrator-loader')
}
]
},
// ...
Usage
- exportStyle: 'default' | 'name' | 'none'
- defaultValue === 'default'
// none
const Example = require('./Example.svg') // ES5
import Example from './Example.svg' // ES6
// name
const Example = require('./Example.svg').Example // ES5
import { Example } from './Example.svg' // ES6
// default
const Example = require('./Example.svg').default // ES5
import Example from './Example.svg' // ES6
name
illustratorClass
- defaultValue === 'cls'
remove
- title: defaultValue === false
- xmlns: defaultValue === false
- space: defaultValue === false
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<style>
<!-- illustratorClass and index -->
.cls-1 {
fill: none;
stroke: #a36868;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<!-- iconName start -->
<title>User</title>
<!-- iconName end -->
<g id="User">
<path class="cls-1" d="M56,56A24,24,0,0,0,8,56"/>
<circle class="cls-1" cx="32" cy="20" r="12"/>
</g>
</svg>
loadmap
- this document is a little poor...
- type support for typescript