dyna-svg
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    About

    Import svg images into the dom in to style and interact with it's nodes.

    Written in typescript, runs everywhere.

    Demo

    • npm install (if you didn't)
    • npm start to see the demo

    Install

    1. npm install --save dyna-svg

    2. npm install --save-dev svg-inline-loader

    3. In webpack loaders of your app, you should add the svg-inline-loader as below.

      {
        test: /\.svg$/, loader: 'svg-inline-loader'
      },
    
    1. If you have already a loader for svg maybe there is need to disable it for the svg files.

    Use

    Imports the svg as dom element to style the contents of or animate them.

    Examples

    Use without any style

            const svgIcon = require('./assets/svg-file-format-variant.svg');
            ...
            <DynaSvg src={svgIcon} />
    

    The default width is applied from the dyna-svg-defaults size 63.4477px indicating that you didn't define a style.

    Use with css class

            const svgIcon = require('./assets/svg-file-format-variant.svg');
            ...
            <DynaSvg className="my-nice-svg" src={svgIcon} />
    

    Similar your can use css modules

    Much better

    Style it from js

            const svgIcon = require('./assets/svg-file-format-variant.svg');
            ...
            <DynaSvg src={svgIcon} style={{width: '150px'}} />
    

    Awesome tiger

    Keywords

    none

    Install

    npm i dyna-svg

    DownloadsWeekly Downloads

    4

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    63.3 kB

    Total Files

    38

    Last publish

    Collaborators

    • dennisat