open-index/open-npm huggingface dataset:
npm package: @financial-times/social-images
Description: A set of social media icons. These are coloured with the logo colour of the social network.
Latest version: 2.2.5

# Social images

A set of social media icons. These are coloured with the logo colour of the social network.

- [Usage](#usage)
- [Adding or modifying icons](#adding-or-modifying-icons)
- [Contact](#contact)
- [Licence](#licence)

## Usage

As with all image sets, these are available via the [Image Service](https://www.ft.com/__origami/service/image/v2).

To get an social logo from the Image Service, use the following URL (replace the `product_source` with your product name and `icon_name` with the icon you want)

`https://www.ft.com/__origami/service/image/v2/images/raw/ftsocial:{icon_name}?source={product_source}`

So to get a twitter icon:
`https://www.ft.com/__origami/service/image/v2/images/raw/ftsocial:twitter?source=test`


### Getting these icons in a different colour/format/size

The Image Service will convert these images on the fly if you pass in the right parameters. To find out more about this, please see the [Image Service documentation](https://www.ft.com/__origami/service/image/v2/docs/api)

## Adding or modifying icons

To keep social icons consistent, please follow these guidelines:

- Icons must be SVG format
- Icons must represent the brand colours of the social network
- Icons should have a viewBox of 66x66
- Icons must be passed through an SVG compressor like SVGOMG
- File names must be all lower case and hyphenated
  - **good** twitter.svg, financial-times.svg, yahoo.svg
  - **bad** Twitter.svg, financialtimes.svdg, yahoo!.svg

----

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-social-images/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

----

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
npm package: @financial-times/sourcepoint-cmp
Description: A package to help you add SourcePoint's CMP to your application.
Latest version: 1.3.0
Deprecated: This package is no longer supported

# SourcePoint CMP

A package to help you add SourcePoint's CMP to your application.

## Installation

Install the package from npm:

```copy
npm install @financial-times/sourcepoint-cmp
```

You then have two options for adding the CMP to your application:

1. Server-side rendering using JSX
2. Client-side invocation

Both patterns have reference implementations that you can look at in `src/examples/sourcepoint-cmp`.

To see them in action run

```copy
npm run dev -w src/examples/sourcepoint-cmp
```

and visit http://localhost:5137 to see each in action: interact with the banner and watch the console output to see your consent choices logged there.

## Usage

### Rendering with JSX

Import the CMP components and render them in your application's JSX:

```jsx
import React from "react";
import { CmpScripts } from "@financial-times/sourcepoint-cmp/ssr";

// Import your domain's CMP configuration from the `properties` module.
import { ft } from "@financial-times/sourcepoint-cmp/properties";

export const App = () => (
  <html>
    <head>
      <CmpScripts config={ft}></CmpScripts>;
    </head>
    <body />
  </html>
);
```

### Dynamic insertion

An alternative client-side mechanism is available.

The `getCmpScripts` method returns a `DocumentFragment` containing block of scripts that you can to your page's `<head>` element.

```js
import { getCmpScripts } from "@financial-times/sourcepoint-cmp/client";
import { ft } from "@financial-times/sourcepoint-cmp/properties";

const cmpScripts = getCmpScripts(ft);
document.head.appendChild(cmpScripts);
```

## Debugging

You can verify that the CMP is correctly configured by adding an `events` map to your configuration: the `debug` module used in the examples provides a sample implementation:

```js
import { getCmpScripts } from "@financial-times/sourcepoint-cmp/client";
import { ft } from "@financial-times/sourcepoint-cmp/properties";
import { events } from "@financial-times/sourcepoint-cmp/debug";

// Merge the events map into the domain configuration
const config = { ...ft, events };
document.head.appendChild(getCmpScripts(config));
```

If everything's working then when running the demo app you'll see the CMP log its lifecycle events to the console, _even if its UI isn't displayed_.

This can easily happen when you've made a previous consent choice and the CMP is now picking it up from local storage. We recommend running in an incognito window during development.